/* Clovermind: the products page. Loaded after css/main.css, which holds the tokens, the shell, the cards,
   the mats, the phones, the traced run's pencil line and the aubergine fact card. This sheet only arranges them:
   one band per product (a card, then its spec rows as quiet rows on the paper), Hindsight's four screens
   standing whole in one wide mat, Adam V2's cortex map on its screen in a mat, Adam V1 as the aubergine card,
   and the closing Soon card with the warm point breathing in it. */

/* ============================================================
   1. The page head and the product bands
   ============================================================ */

.products-head .index { margin-top: clamp(40px, 4.4vw, 64px); }

.product { padding-top: var(--section); }
.products-head + .product { padding-top: clamp(40px, 4.4vw, 64px); }

/* the product name is the band's heading: an h2 set a step under the page's h1 */
.product-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.875rem, 1.3rem + 1.1vw, 2.5rem);   /* 30 to 40px; the h1 leads by 1.3x or more */
  line-height: 1.06; letter-spacing: -0.018em;
  font-variant-numeric: lining-nums; font-optical-sizing: auto;
  text-wrap: balance;
}
.product-title .nowrap { white-space: nowrap; }   /* "Adam 15 Quanta" never breaks; [Pong] may drop to its own line */
.product-kind { font-weight: 300; color: var(--graphite); letter-spacing: 0; }
.card--dark .product-kind { color: var(--mist); }

.feature .product-title, .showcase .product-title { margin-top: var(--s-3); }
.product .body { max-width: 46ch; }
.product-cta { margin-top: var(--s-6); }

/* an arrow inside a pill (the one link that leaves the site) */
.btn-arrow { width: 16px; height: 16px; flex: none; margin-right: -4px; transition: transform .2s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* the primary pill turned over for the aubergine card */
.btn-light { background: var(--on-dark); color: var(--aubergine); }
.btn-light:hover { background: var(--mat); }

/* ============================================================
   2. Spec rows: quiet rows on the paper, under the card they belong to.
   They keep the card's own 5/7 grid, so every key lines up with the card's text above
   and every value with the right-hand column.
   ============================================================ */

.specs {
  margin-top: clamp(40px, 4.4vw, 64px);
  border-bottom: 1px solid var(--hairline);
}
.spec {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(32px, 4.5vw, 72px);
  row-gap: var(--s-1);
  padding: clamp(18px, 1.7vw, 22px) var(--inset);   /* the card's own inset, so the 5/7 grid matches it exactly */
  border-top: 1px solid var(--hairline);
}
.spec dt {
  padding-left: clamp(12px, 2.8vw, 40px);
  font-size: 16px; line-height: 1.55; font-weight: 500; color: var(--ink);
  text-wrap: balance;
}
.spec dd {
  margin: 0;
  max-width: 66ch;
  font-size: 16px; line-height: 1.6; color: var(--graphite);
  text-wrap: pretty;
}

/* ============================================================
   3. Hindsight: the copy over one wide mat, its four real screens standing whole, unlabelled (each alt says
   what its screen shows), with the same margin of mat above and below them
   ============================================================ */

.showcase { padding: var(--inset); }
.showcase-copy {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);   /* the feature cards' grid: the text starts where their mats do */
  column-gap: clamp(32px, 4.5vw, 72px);
  padding: clamp(20px, 3.2vw, 44px) 0 clamp(28px, 3.4vw, 48px);
}
.showcase-title { padding-left: clamp(12px, 2.8vw, 40px); }
.showcase-text { padding-top: clamp(6px, 1vw, 14px); padding-right: clamp(12px, 2.8vw, 40px); }
.showcase-text .body { max-width: 58ch; }

.screens {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
  padding: clamp(28px, 3.6vw, 52px) clamp(20px, 3.6vw, 52px);
}
.screens > li { display: flex; justify-content: center; min-width: 0; }
.screen { width: 100%; max-width: 280px; }
/* each screen is a whole iPhone (main.css .iphone), the owner's own screenshots, uncut */

/* ============================================================
   4. Adam V2: the cortex map, a real screenshot, standing in its mat like Adam 15's traced run above it:
   the dark screen in a thin warm-black bezel (the phones' own), centred in the mat with no caption
   ============================================================ */

.cortex {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 3.6vw, 52px) clamp(20px, 3.6vw, 52px);
}
.cortex-screen { background: var(--ink); padding: 4px; border-radius: 14px; }
.cortex-screen img { width: 100%; height: auto; border-radius: 10px; background: var(--screen); }

/* ============================================================
   5. Adam V1: the aubergine card. "100 neurons. No labels." beside what the hundred neurons learned
   (the picture speaks for itself: no caption)
   ============================================================ */

.feature--dark .feature-copy { padding-left: clamp(12px, 2.8vw, 40px); }
.learned {
  container-type: inline-size;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 3.6vw, 52px) clamp(20px, 3.6vw, 52px);
}
.learned .fact { padding: 0; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }

/* ============================================================
   6. Soon: the page closes on what comes next
   ============================================================ */

.soon--long {
  flex-direction: column; gap: 0;
  padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 64px) clamp(36px, 4.4vw, 60px);
}
.soon--long .soon-line { margin-top: var(--s-5); }
.soon--long .body { max-width: 52ch; margin-top: var(--s-3); }

/* ============================================================
   7. Responsive (the site's steps: 1179, 900, 600, 380)
   ============================================================ */

@media (max-width: 1179px) {
  .screens { gap: clamp(16px, 2vw, 24px); }
}

@media (max-width: 900px) {
  .spec { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(20px, 4vw, 32px); padding-right: clamp(16px, 2.6vw, 36px); }
  .spec dt { padding-left: clamp(16px, 2.6vw, 36px); }

  .showcase-copy { grid-template-columns: 1fr; padding: clamp(24px, 3.4vw, 36px) clamp(16px, 2.6vw, 36px) clamp(24px, 3.4vw, 32px); }
  .showcase-title { padding-left: 0; }
  .showcase-text { padding: 0; }
  .showcase-text .body { margin-top: var(--s-4); max-width: 52ch; }
  /* two by two, the columns as wide as the phones and the gaps the same both ways */
  .screens {
    grid-template-columns: repeat(2, minmax(0, 250px)); justify-content: center;
    gap: clamp(20px, 4vw, 32px); padding: clamp(24px, 4vw, 40px) clamp(16px, 4vw, 40px);
  }

  .feature--dark .learned { order: -1; }
  .feature--dark .feature-copy { padding-left: clamp(16px, 2.6vw, 36px); }
  .learned { padding: clamp(32px, 5vw, 44px) clamp(16px, 2.6vw, 36px) 8px; }   /* the copy's own edge below it */
  .learned .fact { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); }
}

@media (max-width: 600px) {
  .products-head + .product { padding-top: var(--s-6); }
  .product-cta { margin-top: var(--s-5); }
  .product-cta .btn { width: 100%; }

  /* keys over values, both at the cards' 26px text edge */
  .spec { grid-template-columns: 1fr; padding: 18px 26px; }
  .spec dt { padding-left: 0; }

  .screens { padding: 16px; gap: 14px; }   /* an even margin of mat round the phones, as round the cortex map */

  .cortex { padding: var(--s-4); }   /* an even margin of mat round the screen */
  .cortex-screen { padding: 3px; border-radius: 10px; }
  .cortex-screen img { border-radius: 7px; }

  .learned { padding: var(--s-5) var(--s-4) 0; }
  .learned .fact { grid-template-columns: 1fr; gap: var(--s-5); }
  .learned .fields { max-width: 260px; }

  .soon--long { align-items: flex-start; text-align: left; padding: 26px; }
  .soon--long .soon-line { margin-top: var(--s-4); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-arrow { transition: none; }
}