/* Products Hub — discovery page only. Reuses tokens, buttons, section rhythm. */

.ph-hero{
  padding:28px 0 64px;
  background:var(--soft);
  border-bottom:1px solid var(--line);
}
.ph-hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:center;
}
.ph-hero-copy h1{
  font-size:clamp(34px,4.2vw,52px);
  line-height:1.08;
  letter-spacing:-.035em;
  margin-bottom:16px;
  color:var(--ink);
}
.ph-hero-copy > p{
  font-size:17px;
  line-height:1.65;
  max-width:560px;
  margin-bottom:22px;
}
.ph-paths{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:0 0 26px;
  padding:0;
  list-style:none;
}
.ph-paths li{
  border-top:1px solid var(--line);
  padding-top:12px;
}
.ph-paths strong{
  display:block;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#7a8792;
  margin-bottom:4px;
}
.ph-paths span{
  color:var(--ink);
  font-size:14px;
  font-weight:700;
}
.ph-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.ph-hero-media{
  background:#fff;
  min-height:360px;
  aspect-ratio:4/3;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.ph-hero-collage{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:8px;
  width:100%;
  height:100%;
  padding:12px;
  box-sizing:border-box;
}
.ph-hero-collage span{
  display:grid;
  place-items:center;
  background:#dce1e6;
  color:#6b7882;
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-align:center;
  padding:8px;
}
.ph-hero-collage span:nth-child(1){grid-column:1 / 3}
.ph-hero-collage span:nth-child(5){grid-column:2 / 4}

.ph-overview-grid{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:40px;
  align-items:start;
}
.ph-overview-copy p{
  max-width:680px;
  margin:0 0 14px;
}
.ph-flow{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}
.ph-flow li{
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:15px;
  font-weight:700;
  color:var(--ink);
}
.ph-flow li span{
  display:block;
  margin-top:4px;
  font-weight:400;
  color:var(--muted);
  font-size:14px;
}

.ph-family{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:40px;
  align-items:center;
  padding:56px 0;
  border-top:1px solid var(--line);
}
.ph-family:first-of-type{border-top:0;padding-top:8px}
.ph-family.is-reverse{grid-template-columns:1.15fr 1fr}
.ph-family.is-reverse .ph-family-media{order:2}
.ph-family.is-reverse .ph-family-copy{order:1}
.ph-family-media{
  aspect-ratio:4/3;
  background:#dce1e6;
  display:grid;
  place-items:center;
  color:#6b7882;
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
  padding:24px;
}
.ph-family-no{
  color:var(--red);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.ph-family-copy h3{
  margin:0 0 12px;
  font-size:clamp(26px,3vw,34px);
  color:var(--ink);
  line-height:1.15;
}
.ph-family-copy > p{
  margin:0 0 18px;
  font-size:15px;
  max-width:520px;
}
.ph-subgroups{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  margin:0 0 18px;
  padding:0;
  list-style:none;
}
.ph-subgroups li{
  border:1px solid var(--line);
  background:#fff;
  padding:7px 10px;
  font-size:12px;
  font-weight:700;
  color:var(--ink);
}
.ph-fields,
.ph-apps-mini{
  margin:0 0 14px;
  padding:0;
  list-style:none;
}
.ph-fields li,
.ph-apps-mini li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-top:1px solid var(--line);
  font-size:13px;
}
.ph-fields strong,
.ph-apps-mini strong{
  color:#7a8792;
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.ph-fields span,
.ph-apps-mini span{
  color:var(--ink);
  font-weight:600;
  text-align:right;
}
.ph-reps{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  margin:0 0 18px;
}
.ph-reps a{
  font-size:13px;
  font-weight:700;
  color:var(--blue);
  text-decoration:none;
}
.ph-reps a:hover{text-decoration:underline}
.ph-reps a:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
}
.ph-boundary{
  margin:0 0 16px;
  padding:12px 14px;
  background:#fff;
  border-left:3px solid var(--blue);
  font-size:13px;
  color:var(--text);
}
.ph-family-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.ph-app-grid,
.ph-tech-grid,
.ph-guide-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.ph-app-card,
.ph-tech-card,
.ph-guide-card{
  display:block;
  padding-top:14px;
  border-top:1px solid var(--line);
  text-decoration:none;
  color:inherit;
}
.ph-app-card:focus-visible,
.ph-tech-card:focus-visible,
.ph-guide-card:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:4px;
}
.ph-app-card h3,
.ph-tech-card h3,
.ph-guide-card h3{
  margin:0 0 8px;
  font-size:18px;
  color:var(--ink);
}
.ph-app-card p,
.ph-tech-card p,
.ph-guide-card p{
  margin:0 0 10px;
  font-size:14px;
}
.ph-app-card .meta,
.ph-tech-card .meta,
.ph-guide-card .meta{
  display:block;
  margin-bottom:10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#7a8792;
}
.ph-guide-card .meta{color:var(--red)}

.ph-relation{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:40px;
  align-items:start;
}
.ph-diagram{
  border:1px solid var(--line);
  background:#fff;
  padding:28px;
}
.ph-diagram h3{
  margin:0 0 18px;
  font-size:18px;
}
.ph-chain{
  margin:0 0 22px;
  padding:0;
  list-style:none;
}
.ph-chain li{
  position:relative;
  padding:12px 0 12px 0;
  border-top:1px solid var(--line);
  font-weight:700;
  color:var(--ink);
  font-size:15px;
}
.ph-chain li:last-child{border-bottom:1px solid var(--line)}
.ph-chain li span{
  display:block;
  margin-top:4px;
  font-weight:400;
  color:var(--muted);
  font-size:13px;
}
.ph-chain li + li:before{
  content:"↓";
  position:absolute;
  left:50%;
  top:-11px;
  transform:translateX(-50%);
  background:#fff;
  color:var(--blue);
  font-size:12px;
  padding:0 6px;
  line-height:1;
}
.ph-relation-note{
  margin:0;
  font-size:14px;
  color:var(--muted);
}

.ph-select{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:36px;
  align-items:start;
}
.ph-select-list{
  margin:0;
  padding:0;
  list-style:none;
}
.ph-select-list li{
  padding:14px 0;
  border-top:1px solid var(--line);
  font-size:15px;
}
.ph-select-list li:last-child{border-bottom:1px solid var(--line)}
.ph-select-list strong{
  display:block;
  margin-bottom:4px;
  color:var(--ink);
}
.ph-select-cta{
  padding:28px;
  background:#fff;
  border:1px solid var(--line);
}
.ph-select-cta h3{
  margin:0 0 10px;
  font-size:22px;
}
.ph-select-cta p{margin:0 0 18px;font-size:14px}
.ph-select-cta .actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}

@media(max-width:1024px){
  .ph-app-grid,
  .ph-tech-grid,
  .ph-guide-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:980px){
  .ph-hero-grid,
  .ph-overview-grid,
  .ph-relation,
  .ph-select{grid-template-columns:1fr;gap:28px}
  .ph-paths{grid-template-columns:1fr}
  .ph-family,
  .ph-family.is-reverse{
    grid-template-columns:1fr;
    gap:24px;
    padding:40px 0;
  }
  .ph-family.is-reverse .ph-family-media,
  .ph-family.is-reverse .ph-family-copy{order:initial}
}
@media(max-width:700px){
  .ph-hero{padding:24px 0 48px}
  .ph-app-grid,
  .ph-tech-grid,
  .ph-guide-grid{grid-template-columns:1fr}
  .ph-hero-media{min-height:240px}
}