/* UB-856 #11: per-card "learn more" link into the per-product detail page */
  .product-card-link { display: inline-block; margin-top: 0.85rem; font-size: var(--fs-sm); }
  .products-hero {
    background: linear-gradient(135deg, #0a192f 0%, #0d1f3c 40%, #162544 100%);
    padding: calc(60px + 3rem) 0 2.5rem;
    text-align: center;
  }
  .products-hero .section-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
  }
  .products-hero .overline {
    display: inline-block;
    color: #d4af55;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
  }
  .products-hero h1 {
    font-size: var(--fs-h1);
    color: #fff;
    margin-bottom: 0.5rem;
  }
  .products-subtitle {
    color: rgba(255,255,255,0.65);
    font-size: var(--fs-base);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
  }

  /* webgfx Lane B (2026-09-02): .section-head (overline + h2) was reused by
     .products-principle-section / .products-domains / .products-pricing
     with no rule anywhere in this file -- the h2 fell back to the base
     navy default while sitting directly on the dark page/section
     background (navy-on-navy, WCAG ratio 1.03; probe: assert-contrast). */
  .section-head { margin-bottom: 1.5rem; }
  .section-head .overline {
    display: block;
    color: var(--gold, #d4af55);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
  }
  .section-head h2 { color: #fff; }

  /* Tabs */
  .products-showcase {
    background: #0a192f;
    padding: 0 0 3rem;
  }
  .products-showcase .section-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
  }
  .tabs-nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 2rem;
  }
  .tab-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.55);
    font-family: 'Heebo', sans-serif;
    font-size: var(--fs-base);
    font-weight: 600;
    padding: 0.85rem 1.75rem;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
  }
  .tab-btn:hover {
    color: rgba(255,255,255,0.85);
  }
  .tab-btn.active {
    color: #d4af55;
  }
  .tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: 0;
    left: 0;
    height: 2px;
    background: #d4af55;
  }
  .tab-pane {
    display: none;
  }
  .tab-pane.active {
    display: block;
  }

  /* Product Intro */
  .product-intro {
    max-width: 700px;
    margin: 0 auto 2rem;
    text-align: center;
  }
  .product-intro h2 {
    color: #fff;
    font-size: var(--fs-h3);
    margin-bottom: 0.5rem;
  }
  .product-intro p {
    color: rgba(255,255,255,0.7);
    font-size: var(--fs-base);
    line-height: 1.7;
  }

  /* Sample Cards */
  .sample-card {
    background: rgba(22, 37, 68, 0.6);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
  }
  .sample-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .sample-badge {
    display: inline-block;
    background: linear-gradient(135deg, #d4af55 0%, #c9a227 100%);
    color: #0a192f;
    padding: 0.2rem 0.75rem;
    border-radius: 12px;
    font-size: var(--fs-2xs);
    font-weight: 700;
    white-space: nowrap;
  }
  .sample-watermark {
    color: rgba(255,255,255,0.35);
    font-size: var(--fs-2xs);
  }
  .sample-body {
    padding: 1.5rem;
    font-family: 'Heebo', sans-serif;
    color: rgba(255,255,255,0.85);
    line-height: 1.8;
    font-size: var(--fs-sm);
  }
  .sample-body p {
    margin-bottom: 0.85rem;
  }
  .sample-body ul {
    margin: 0.5rem 1.5rem 1rem;
    padding: 0;
  }
  .sample-body li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
  }

  /* Memo Table */
  .memo-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0 1.25rem;
    font-size: var(--fs-sm);
  }
  .memo-table th {
    text-align: right;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.6);
    font-weight: 600;
    font-size: var(--fs-xs);
  }
  /* N-1: the strategy-memo sample now renders LTR on /en/products (page-inherited dir);
     the th physical right-align must flip so English headers are left-aligned. */
  [dir="ltr"] .memo-table th { text-align: left; }
  .memo-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.8);
  }
  .strength-high {
    color: #10b981;
    font-weight: 600;
  }
  .strength-mid {
    color: #d4af55;
    font-weight: 600;
  }

  /* Stats */
  .product-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
  }
  .stat-box {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 1.25rem;
    text-align: center;
  }
  .stat-number {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-h2);
    font-weight: 700;
    color: #d4af55;
    margin-bottom: 0.25rem;
  }
  .stat-label {
    color: rgba(255,255,255,0.6);
    font-size: var(--fs-sm);
  }
  /* Caption below stat boxes — clarifies these are demo-case-specific, not global metrics (R2 fold 2026-05-16) */
  .product-stats-caption {
    color: rgba(255,255,255,0.55);
    font-size: var(--fs-xs);
    font-style: italic;
    text-align: center;
    margin-top: 0.75rem;
  }

  /* CTA */
  .products-cta {
    background: #0a192f;
    padding: 2.5rem 0 4rem;
    text-align: center;
  }
  .products-cta .section-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
  }
  .products-cta p {
    color: rgba(255,255,255,0.75);
    font-size: var(--fs-md);
    margin-bottom: 1.25rem;
  }

  /* Domains */
  .products-domains { padding: 3rem 0; background: #0a192f; }
  .domains-grid {
    display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center;
    margin: 1.5rem 0;
  }
  .domain-tag {
    background: rgba(212,175,85,0.08); border: 1px solid rgba(212,175,85,0.25);
    color: rgba(255,255,255,0.85); padding: 0.5rem 1rem; border-radius: 6px;
    font-size: var(--fs-sm); font-family: 'Heebo', sans-serif;
  }
  .domains-note { text-align: center; color: rgba(255,255,255,0.5); font-size: var(--fs-sm); margin-top: 0.75rem; }

  /* Pricing */
  .products-pricing { padding: 2.5rem 0; max-width: var(--prose-max); margin: 0 auto; text-align: center; }
  .products-pricing p { color: rgba(255,255,255,0.75); line-height: 1.7; margin-bottom: 0.75rem; }

  /* Domain category labels in products page flex grid */
  .domains-cat-label {
    width: 100%; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--gold, #d4af55);
    padding: 1rem 0 0.25rem; border-bottom: 1px solid rgba(212,175,85,0.15);
    margin: 0.5rem 0 0.25rem;
  }

  /* Pricing link in products pricing section */
  .products-pricing-link {
    display: inline-block; margin-top: 0.75rem;
    color: var(--gold, #d4af55); text-decoration: none; font-size: var(--fs-sm);
    border-bottom: 1px solid rgba(212,175,85,0.3); transition: border-color 0.2s;
  }
  .products-pricing-link:hover { border-color: var(--gold, #d4af55); }

  /* Mobile */
  @media (max-width: 768px) {
    .products-hero { padding: calc(60px + 2rem) 1.5rem 3rem; }
    .sample-soc-hero { padding: calc(60px + 2rem) 1.5rem 3rem; }
  }
  @media (max-width: 600px) {
    .products-hero h1 { font-size: var(--fs-h2); }
    .product-stats { grid-template-columns: 1fr; }
    .sample-header { flex-direction: column; gap: 0.35rem; align-items: flex-start; }
    .tabs-nav { gap: 0; }
    .tab-btn { padding: 0.75rem 1.25rem; font-size: var(--fs-sm); }
    .memo-table { font-size: var(--fs-xs); }
    .memo-table th, .memo-table td { padding: 0.4rem 0.5rem; }
    .domain-tag { font-size: var(--fs-sm); padding: 0.4rem 0.75rem; }
  }

/* moved from shared-v2-merged.css by UB-3214 (2026-09-02); original order preserved */
.products-cards-section {
    padding: 2rem 0 0;
}

.products-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2.5rem;
}

@media (max-width: 900px) {
    .products-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .products-cards-grid { grid-template-columns: 1fr; }
}

.product-card-title {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--gold, #d4af55);
    margin-bottom: 0.4rem;
}

.product-card-desc {
    font-size: var(--fs-xs);
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
    margin: 0;
}

.roadmap-mini-label {
  color: rgba(255,255,255,0.55);
  font-size: var(--fs-sm);
  text-align: center;
  margin-bottom: 1rem;
  letter-spacing: 0.3px;
}

/* ─── Products: Domain Summary Grid ─── */
.domains-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 720px;
  margin: 1.5rem auto 0;
}

.domain-summary-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  direction: rtl;
}

.domain-summary-cat {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(212,175,85,0.85);
  margin-bottom: 0.65rem;
}

.domain-summary-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.domain-more {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.55);
  margin-right: 0.2rem;
}

@media (max-width: 600px) {
  .domains-summary-grid {
    grid-template-columns: 1fr;
  }
}

  /* UB-3583 batch C5: "Facts. Not conclusions." gets the site's standard
     prose content max-width (var(--prose-max), the same cap .body-wrap
     applies on origin/story/trust/methodology) instead of stretching to
     the full .section-container width. margin: 0 auto is direction-neutral
     (both sides auto) so no logical/physical distinction applies here. */
  .products-principle-section .prose {
    max-width: var(--prose-max);
    margin: 0 auto;
  }