/* Shared readable type for portfolio pages. Load AFTER project-specific styles.
   New pages: keep body.portfolio-readable and this stylesheet link. */
body.portfolio-readable {
  --portfolio-label-size: 15px;
  --portfolio-caption-size: 15px;
  --portfolio-copy-size: 16px;
  --portfolio-caption-color: #b5c1d4;
}

body.portfolio-readable .eyebrow {
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .08em;
}
body.portfolio-readable .eyebrow::before { flex-shrink: 0; }
body.portfolio-readable .feature-number,
body.portfolio-readable .flow article > span,
body.portfolio-readable .version > span,
body.portfolio-readable .tool > code {
  display: block;
  color: var(--accent);
  font-size: var(--portfolio-label-size);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .03em;
  overflow-wrap: anywhere;
}
body.portfolio-readable .metric span {
  color: var(--portfolio-caption-color);
  font-size: var(--portfolio-caption-size);
  line-height: 1.6;
  text-transform: none;
  letter-spacing: 0;
}
body.portfolio-readable .feature p,
body.portfolio-readable .flow p,
body.portfolio-readable .version p,
body.portfolio-readable .tool p {
  font-size: var(--portfolio-copy-size);
  line-height: 1.75;
}
body.portfolio-readable .feature h3,
body.portfolio-readable .flow h3,
body.portfolio-readable .tool h3 { font-size: 22px; line-height: 1.3; }
body.portfolio-readable .section-head p { font-size: 17px; line-height: 1.75; }
body.portfolio-readable .hero-tags li { font-size: 12px; line-height: 1.5; letter-spacing: .04em; }
body.portfolio-readable .button { font-size: 14px; line-height: 1.5; letter-spacing: .04em; }
body.portfolio-readable .product-header nav { gap: clamp(12px, 1.8vw, 24px); }
body.portfolio-readable .product-header nav a { font-size: 13px; line-height: 1.5; letter-spacing: .04em; }
body.portfolio-readable .menu-toggle { min-height: 44px; font-size: 13px; }
body.portfolio-readable .suite-brand small { font-size: 11px; letter-spacing: .06em; }
body.portfolio-readable .product-footer { color: var(--portfolio-caption-color); font-size: 14px; line-height: 1.6; }
body.portfolio-readable .product-footer .privacy-button { font-size: 14px; line-height: 1.6; }
body.portfolio-readable .product-footer > div { flex-wrap: wrap; }

/* Store buttons use one shared layout; unavailable CLN buttons stay disabled. */
body.portfolio-readable .hero-downloads,
body.portfolio-readable .platform-downloads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 640px;
}
body.portfolio-readable .platform-downloads .web-demo { grid-column: 1 / -1; justify-self: start; }
body.portfolio-readable .platform-download,
body.portfolio-readable .hero-downloads .button {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 80px;
  width: 100%;
  padding: 16px 18px;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
}
body.portfolio-readable .platform-download svg,
body.portfolio-readable .hero-downloads svg {
  width: 28px; height: 28px; flex-shrink: 0; fill: currentColor;
}
body.portfolio-readable .platform-download > span,
body.portfolio-readable .hero-downloads .button > span { min-width: 0; }
body.portfolio-readable .platform-download strong,
body.portfolio-readable .hero-downloads strong { display: block; font-size: 16px; font-weight: 650; line-height: 1.4; }
body.portfolio-readable .platform-download small,
body.portfolio-readable .hero-downloads small { display: block; margin-top: 4px; color: #becadd; font-size: 13px; line-height: 1.5; }
body.portfolio-readable .store-buttons .store-button small { font-size: 14px; line-height: 1.5; }
body.portfolio-readable .store-buttons .store-button strong { font-size: 20px; line-height: 1.4; }

@media (max-width: 600px) {
  body.portfolio-readable .hero-downloads,
  body.portfolio-readable .platform-downloads { grid-template-columns: minmax(0, 1fr); }
  body.portfolio-readable .platform-downloads .web-demo { justify-self: stretch; }
}