/* ==========================================================
   DeltaVisor · product page (site/product/index.html)

   Layers on the shared design system and on ../styles.css (the .hsec rhythm,
   .hl-swatch signals, .stat-band, .faq, .site-foot).

   This page is the deep dive behind the home page's three-surface block, so it
   owns one repeated shape: a wide feature block that alternates a reading
   column against a mono spec panel. The panel is what a technical buyer reads
   first, so it carries facts rather than adjectives.
========================================================== */

/* ==========================================================
   PAGE HEAD
========================================================== */
.phead { padding: clamp(2.5rem, 5vw, var(--s-8)) var(--gutter) var(--rhythm-block); }
.phead > * { max-width: var(--home-max); margin-inline: auto; }
.phead__inner { display: flex; flex-direction: column; gap: var(--s-4); }
.phead h1 {
  font-size: clamp(2.5rem, 5.5vw, var(--t-5xl));
  line-height: 1.02; letter-spacing: -0.038em; font-weight: 650;
  max-width: 16ch;
}
.phead__sub {
  font-size: clamp(1rem, 1.4vw, var(--t-lg));
  color: var(--ink-mid); line-height: 1.6; max-width: var(--measure-lede);
}

/* Jump strip: the page is long and each surface is a destination in its own
   right, linked from the home page and the footer. */
.phead__jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--s-4); }
.phead__jump a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--rule); background: var(--paper-1);
  border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-soft);
  transition: background var(--dur) var(--ease);
}
.phead__jump a:hover { background: var(--paper-2); color: var(--ink); }

/* ==========================================================
   FEATURE BLOCK · reading column + spec panel, alternating
========================================================== */
.feature { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.feature--flip .feature__body { order: 2; }
@media (max-width: 62rem) {
  .feature { grid-template-columns: 1fr; gap: var(--s-6); }
  .feature--flip .feature__body { order: 0; }
}

.feature__body { display: flex; flex-direction: column; gap: var(--s-5); }
.feature__body .hsec__head { margin-bottom: 0; }
.feature__p { color: var(--ink-mid); font-size: var(--t-base); line-height: 1.7; max-width: var(--measure); }
.feature__p strong { color: var(--ink-soft); font-weight: 600; }

/* The spec panel: a mono fact sheet. Nothing in here is an adjective. */
.spec {
  background: var(--paper-1);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--rule);
  padding: var(--pad-card);
  display: flex; flex-direction: column; gap: var(--s-5);
  position: sticky; top: 5rem;
}
@media (max-width: 62rem) { .spec { position: static; } }

.spec__cap {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-2xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
}
.spec__rows { display: flex; flex-direction: column; }
.spec__row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-4);
  align-items: baseline;
  padding: 0.8125rem 0;
  border-top: 1px solid var(--rule);
  font-size: var(--t-sm);
}
.spec__row:first-child { border-top: 0; padding-top: 0; }
.spec__k { color: var(--ink-mid); }
.spec__v { color: var(--ink); font-family: var(--font-mono); font-size: var(--t-xs); text-align: right; font-variant-numeric: tabular-nums; }
.spec__v--soft { color: var(--ink-mid); }
.spec__note { font-size: var(--t-xs); color: var(--ink-ghost); line-height: 1.55; padding-top: var(--s-3); border-top: 1px solid var(--rule); }

/* A metered / included split, used on the property block. The cut is the thing
   customers most misread, so it is a table rather than prose. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); margin-top: var(--s-3); }
@media (max-width: 40rem) { .split { grid-template-columns: 1fr; } }
.split__col { display: flex; flex-direction: column; gap: var(--s-3); }
.split__h {
  font-family: var(--font-mono); font-size: var(--t-2xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  padding-bottom: var(--s-2); border-bottom: 1px solid var(--rule);
}
.split__h--in { color: var(--status-success); }
.split__h--meter { color: var(--accent); }
.split__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.split__col li { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.45; }

/* ==========================================================
   THE PIPELINE · six things the engine does, region by region
========================================================== */
.pipeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); }
@media (max-width: 62rem) { .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .pipeline { grid-template-columns: 1fr; } }

.pipe {
  padding: var(--pad-card);
  background: var(--paper-1); border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--rule);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.pipe__k { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-ghost); }
.pipe h3 { font-size: var(--t-md); letter-spacing: -0.01em; }
.pipe p { font-size: var(--t-sm); color: var(--ink-mid); line-height: 1.65; }