/* ==========================================================================
   TRACK RECORD — numbered statements on hairlines, two columns on wide screens
   PRODUCTS THAT RUN THEMSELVES — alternating product rows (shot + body)
   ========================================================================== */

/* ---------- Track record ---------- */
.record { background: var(--bg-white); padding: 0 0 var(--space-section); }
.record-list { list-style: none; display: grid; grid-template-columns: 1fr; column-gap: var(--space-4xl); border-top: 1px solid var(--rule-strong); counter-reset: record; }
@media (min-width: 900px) { .record-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.record-item { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-xl) 0; border-bottom: 1px solid var(--rule-hairline); counter-increment: record; }
.record-item::before { content: counter(record, decimal-leading-zero); font-family: var(--font-serif); font-size: var(--text-2xl); line-height: 1.1; color: var(--brand-green-sage); }
.record-item p { font-family: var(--font-serif); font-size: var(--text-2xl); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); color: var(--ink-primary); text-wrap: pretty; }
.record-item p small { display: block; margin-top: var(--space-xs); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
@media (max-width: 767.98px) { .record-item p { font-size: var(--text-xl); } }

/* ---------- Products ---------- */
.products { background: var(--bg-white); padding: var(--space-section) 0; border-top: 1px solid var(--rule-hairline); }
.product-list { display: flex; flex-direction: column; gap: var(--space-block); }
.product { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; }
@media (min-width: 900px) {
  .product { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-block); }
  .product-reverse > .product-shot { order: 2; }
}
.product-shot { display: block; overflow: hidden; border-radius: var(--radius-xl); background: var(--bg-subtle); box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(21,24,21,0.06), var(--shadow-media); }
.product-shot img { display: block; width: 100%; height: auto; transition: transform var(--motion-enter) var(--ease); }
.product-shot:hover img, .product-shot:focus-visible img { transform: scale(var(--motion-lift)); }
.product-body { min-width: 0; }
.product-brand { display: flex; align-items: center; gap: var(--space-sm); height: 56px; margin-bottom: var(--space-md); }
.product-brand img { height: 100%; width: auto; }
.product-brand .brand-kytes { height: 52px; }
.product-brand .brand-beacon { height: 46px; }
.product-brand-word { font-family: var(--font-serif); font-size: 2.25rem; line-height: 1; letter-spacing: -0.015em; color: #0c0b0a; }
.product-eyebrow { display: block; margin-bottom: var(--space-xs); font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand-green-accent); }
.product-body h3 { margin-bottom: var(--space-sm); }
.product-lead { max-width: 34rem; font-size: var(--text-base); color: var(--ink-secondary); }
.product-lead + .product-lead { margin-top: var(--space-sm); }
.product .tag-row { margin-top: var(--space-md); }
.product-link { display: inline-flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-lg); font-size: var(--text-sm); font-weight: 600; color: var(--brand-green-accent); border-bottom: 1px solid var(--rule-strong); padding-bottom: 2px; transition: gap var(--motion-move) var(--ease), color var(--motion-state) var(--ease), border-color var(--motion-state) var(--ease); }
.product-link svg { width: 16px; height: 16px; }
.product-link:hover { gap: var(--space-sm); color: var(--ink-primary); border-color: var(--brand-green-sage); }
@media (prefers-reduced-motion: reduce) { .product-shot img { transition: none; } .product-shot:hover img { transform: none; } }