/* ==========================================================================
   river42.css — river42.com brand landing
   Editorial layout. Blue signal. Two-column hero, product cards, footer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.hero {
  padding: var(--s-9) 0 var(--s-9);
}

.hero-content {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-6);
  align-items: start;
}

.hero-meta {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  letter-spacing: 0.06em;
  line-height: 1.7;
}
.hero-meta .num { color: var(--signal); display: block; margin-bottom: 4px; }
.hero-meta .label { text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2); }

.hero-body { min-width: 0; }

.hero h1 {
  font-family: var(--font-sans);
  font-size: clamp(64px, 10vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

.hero h1 .signal { color: var(--signal); }

.hero-tagline {
  font-family: var(--font-sans);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--ink-2);
  margin: var(--s-6) 0 0;
  max-width: 28ch;
  text-wrap: balance;
}

.hero p {
  font-family: var(--font-sans);
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink-2);
  margin: var(--s-5) 0 0;
  max-width: 56ch;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   2. Sections
   -------------------------------------------------------------------------- */

.products,
.cta {
  padding: var(--s-9) 0;
}

/* --------------------------------------------------------------------------
   3. Products grid — large product cards
   -------------------------------------------------------------------------- */

.products-group + .products-group { margin-top: var(--s-8); }

.products-group-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.products-group-label .lhs .num { color: var(--signal); margin-right: 10px; }
.products-group-label .lhs .name { color: var(--ink); letter-spacing: 0.12em; }
.products-group-label .rhs { color: var(--ink-3); letter-spacing: 0.04em; text-transform: none; }

.products-grid {
  display: grid;
  border-top: 1px solid var(--ink);
}

.products-grid.released { grid-template-columns: repeat(2, 1fr); }
.products-grid.beta     { grid-template-columns: repeat(3, 1fr); }

.product-tile {
  padding: var(--s-7) var(--s-6);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.15s ease;
  min-height: 280px;
}

/* Per-grid border bookkeeping — every grid's last tile in a row has no right border,
   and no tile gets a bottom border (the grid sits between hairlines, not on them) */
.products-grid.released .product-tile:nth-child(2n) { border-right: 0; }
.products-grid.beta     .product-tile:nth-child(3n) { border-right: 0; }
.products-grid          .product-tile:last-child    { border-right: 0; }

a.product-tile:hover { background: var(--paper-2); color: var(--ink); }

.product-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-2);
}

.product-tile .tag { flex-shrink: 0; }

.product-arrow {
  width: 14px;
  height: 14px;
  stroke: var(--ink-3);
  stroke-width: 1.5;
  fill: none;
  transition: transform 0.2s ease, stroke 0.15s ease;
}

a.product-tile:hover .product-arrow {
  stroke: var(--signal);
  transform: translate(2px, -2px);
}

.product-tile h3 {
  font-family: var(--font-sans);
  font-size: var(--t-3xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}

.product-tile .product-tagline {
  font-family: var(--font-sans);
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--signal);
  margin: 0;
}

.product-tile p {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

.product-url {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* Closed-beta variant — muted, but still links to its info subpage */
.product-tile.is-beta { background: var(--paper-2); }
.product-tile.is-beta h3 { color: var(--ink-2); }
.product-tile.is-beta .product-tagline { color: var(--ink-3); }
a.product-tile.is-beta:hover { background: var(--paper-3); }

/* --------------------------------------------------------------------------
   4. CTA
   -------------------------------------------------------------------------- */

.cta {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-9) 0;
}

.cta-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: end;
}

.cta-content h2 {
  font-family: var(--font-sans);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
  color: var(--paper);
}

.cta-content p {
  font-family: var(--font-sans);
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--paper-3);
  margin: 0;
  max-width: 50ch;
}

.cta-buttons {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-strong);
}

.cta .btn-primary {
  background: var(--signal);
  color: #fff;
  border-color: var(--signal);
}
.cta .btn-primary:hover {
  background: var(--signal-ink);
  border-color: var(--signal-ink);
}

.cta .btn-secondary {
  background: transparent;
  color: var(--paper);
  border-color: var(--ink-3);
}
.cta .btn-secondary:hover {
  background: var(--paper-3);
  color: var(--ink);
  border-color: var(--paper-3);
}

/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .hero { padding: var(--s-7) 0 var(--s-8); }
  .hero-content { grid-template-columns: 1fr; gap: var(--s-4); }
  .hero h1 { font-size: clamp(48px, 12vw, 80px); }
  .hero-tagline { font-size: 22px; }

  .products, .cta { padding: var(--s-7) 0; }

  .products-grid { grid-template-columns: 1fr; }
  .product-tile {
    border-right: 0 !important;
    border-bottom: 1px solid var(--line);
    min-height: 0;
  }
  .product-tile:last-child { border-bottom: 0; }
  .product-tile h3 { font-size: var(--t-2xl); }

  .cta-content { grid-template-columns: 1fr; gap: var(--s-5); }
  .cta-buttons { grid-column: 1; }
}