/* Official product artwork stays in its own colors within the Forest website. */
.project-page .product-identity {
  display:flex; align-items:center; gap:16px; min-width:0; margin:0 0 10px;
}
.product-identity img {
  display:block; flex:none; width:64px; height:64px; object-fit:contain;
}
.project-page .product-identity p {
  margin:0; color:var(--fok-ink); font-size:25px; font-weight:500;
  line-height:1.25; letter-spacing:-.02em;
}
.forest-home .ecosystem-product-logo {
  display:block; width:48px; height:48px; object-fit:contain;
  flex:none; margin:0 0 12px;
}
.forest-home .product-card-brand {
  display:flex; align-items:center; gap:16px; max-width:100%; margin:20px 0 18px;
}
.product-card-brand img {
  display:block; width:48px; height:48px; object-fit:contain; flex:none;
}
.forest-home .product-card-brand h3 { margin:0; min-width:0; }

/* Product recommendations carry the same official identity as each feature page. */
.product-recommendations {
  max-width:1120px; width:calc(100% - 80px); margin:0 auto 64px;
  padding-top:48px; border-top:1px solid var(--fok-border);
  scroll-margin-top:120px;
}
.recommendation-heading > p {
  margin:0 0 12px; font-size:13px; color:var(--fok-green);
}
.recommendation-heading h2 { margin:0 0 28px; }
.recommendation-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.recommendation-grid-four { grid-template-columns:repeat(2,minmax(0,1fr)); }
.recommendation-card {
  display:flex; flex-direction:column; align-items:flex-start; min-width:0;
  padding:28px; border:1px solid var(--fok-border); border-radius:14px;
  background:var(--fok-mint-soft);
}
.recommendation-leaf { background:var(--fok-leaf-soft); }
.recommendation-sky { background:var(--fok-sky-soft); }
.recommendation-brand { display:flex; align-items:center; gap:14px; min-height:56px; }
.recommendation-brand img { display:block; flex:none; width:56px; height:56px; object-fit:contain; }
.project-page .recommendation-brand h3 {
  margin:0; min-width:0; font:500 22px/1.25 var(--fok-body); letter-spacing:-.02em;
}
.recommendation-category { margin:20px 0 8px; font-size:12px; font-weight:500; color:var(--fok-green); }
.recommendation-description { margin:0 0 20px; font-size:14px; line-height:1.8; color:var(--fok-text); }
.recommendation-card > a {
  display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:auto;
  font-size:13px; font-weight:500; text-underline-offset:4px;
}
.recommendation-card > a:hover { color:var(--fok-blue-hover); }
.recommendation-card a:focus-visible, .recommendation-foundation a:focus-visible {
  outline:3px solid var(--fok-focus); outline-offset:5px; border-radius:2px;
}
.recommendation-foundation { margin:24px 0 0; font-size:13px; color:var(--fok-muted); }
.recommendation-foundation a { display:inline-block; margin-left:6px; padding-block:10px; text-underline-offset:4px; }
@media(max-width:1100px) {
  .product-recommendations { width:calc(100% - 60px); }
  .recommendation-card { padding:24px; }
  .recommendation-brand { gap:12px; }
  .recommendation-brand img { width:48px; height:48px; }
  .project-page .recommendation-brand h3 { font-size:20px; }
}
@media(max-width:900px) { .recommendation-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) {
  .project-page .product-identity { gap:13px; }
  .product-identity img { width:56px; height:56px; }
  .project-page .product-identity p { font-size:23px; }
  .forest-home .product-card-brand { gap:13px; }
  .forest-home .product-card-brand h3 { font-size:24px; }
  .product-card-brand img { width:44px; height:44px; }
  .product-recommendations { width:calc(100% - 48px); margin-bottom:40px; padding-top:32px; }
  .recommendation-heading h2 { font-size:30px; margin-bottom:22px; }
}
@media(max-width:640px) { .recommendation-grid { grid-template-columns:1fr; gap:16px; } }
@media(max-width:360px) {
  .project-page .product-identity p { font-size:21px; }
  .forest-home .product-card-brand h3 { font-size:22px; }
}