/* ============================================================
   BLUEGREY — product.css
   The reusable single-scroll product-page template
   (Nester_ProductPageTemplate_v1) + the hub's flagship spotlight.
   Loaded after home.css. Every value resolves to a token in
   tokens.css (WebTokens-Draft v1 layer: deep hero gradient, slate
   glass, radius scale 8/16/22, nest-animation part tints).
   ============================================================ */

/* ---------- deep band (hero / pricing showcase depth) ----------
   Carbon lifting from a near-black centre glow (--bg-hero), with the
   graph-paper grid kept subtly alive on top of the gradient. */
.band--deep {
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid-cell) var(--grid-cell),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid-cell) var(--grid-cell),
    var(--bg-hero);
  box-shadow: inset 0 -1px 0 var(--color-border);
}

/* ---------- larger hero buttons ---------- */
.btn--lg { padding: var(--space-4) var(--space-7); font-size: var(--text-base); }

/* ============================================================
   PRODUCT HERO — centred text, wide media below (the demo video
   is the single most important asset; give it the full column)
   ============================================================ */
.band--phero {
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid-cell) var(--grid-cell),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid-cell) var(--grid-cell),
    var(--bg-hero);
  box-shadow: inset 0 -1px 0 var(--color-border);
  /* fixed header bar: pad down by --header-h like every hero */
  padding-block: calc(var(--space-9) + var(--space-5) + var(--header-h)) var(--space-9);
}
.phero { display: grid; gap: var(--space-5); justify-items: center; text-align: center; }
.phero__title {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: clamp(var(--text-2xl), 7vw, var(--text-3xl));
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight);
  color: var(--color-text-hi);
  max-width: 18ch;
}
.phero__lead { font-size: var(--text-md); color: var(--color-text-secondary); max-width: 56ch; }
.phero__cta { margin-top: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.phero__reassure { color: var(--color-text-secondary); }
.phero__trust { display: grid; gap: var(--space-2); justify-items: center; }
.phero__trust .trust { gap: var(--space-2); }
.phero__corel { color: var(--color-text-muted); }
.phero__media { width: 100%; max-width: var(--maxw-wide); margin-top: var(--space-4); }

/* ============================================================
   MEDIA PLACEHOLDER FRAMES
   .shot--anim carries a CSS nest animation on a muted slate tile
   until the real clip lands (src in data/products.json).
   ============================================================ */
.shot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot--anim {
  position: relative; padding: 0;
  border-style: solid; border-color: var(--color-border);
  background: var(--tile-slate);
  overflow: hidden;
}
/* each mode's placeholder reads distinctly IN COLOUR: restrained branded
   tints only (deep slate / warm neutral / the Option B blue), never flame */
.shot--anim--nest      { background: var(--tile-blue); }
.shot--anim--trueshape { background: var(--tile-blue);  --part-1: var(--part-blue); --part-2: var(--part-slate); }
.shot--anim--inside    { background: var(--tile-warm);  --part-2: var(--part-warm); --part-3: var(--part-blue); }
.shot--anim--strip     { background: var(--tile-slate); --part-2: var(--part-warm); --part-3: var(--part-blue); }
.shot--anim--grid      { background: var(--tile-carbon); --part-1: var(--part-blue); --part-2: var(--part-slate); }
.shot--anim .shot__label {
  position: absolute; left: var(--space-3); bottom: var(--space-2); z-index: 1;
  color: var(--color-text-secondary); opacity: .75; text-align: left;
}

/* ---------- the nest-collapse animation ----------
   Parts sit at their FINAL packed position; keyframes start them
   scattered (--sx/--sy/--sr) and settle them in, hold, and reset.
   Transform + opacity only; frozen packed under reduced motion. */
.nestanim { position: absolute; inset: 0; display: block; }
.nestanim__sheet {
  position: absolute; display: block;
  border: 1px solid var(--sheet-line); border-radius: var(--radius-sm);
  background: var(--sheet-fill);
}
.nestanim__slabel {
  position: absolute; right: var(--space-2); top: var(--space-1);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); color: var(--color-text-muted);
}
.nestanim__hole {
  position: absolute; inset: 12% 10%;
  border: 1px dashed var(--sheet-line); border-radius: var(--radius-sm);
}
.nestanim__strips {
  position: absolute; inset: 0;
  background:
    linear-gradient(var(--sheet-line), var(--sheet-line)) 0 33%/100% 1px no-repeat,
    linear-gradient(var(--sheet-line), var(--sheet-line)) 0 67%/100% 1px no-repeat;
}
.nestanim__part {
  position: absolute; display: block;
  border-radius: var(--radius-sm);
  animation: nest-part var(--dur-nest) var(--ease-out-expo) infinite;
  animation-delay: var(--pd, 0s);
  will-change: transform, opacity;
}
.nestanim__part--1 { background: var(--part-1); }
.nestanim__part--2 { background: var(--part-2); }
.nestanim__part--3 { background: var(--part-3); }
.nestanim__part--round { border-radius: var(--radius-pill); }
@keyframes nest-part {
  0%       { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); opacity: .35; }
  38%, 86% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100%     { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); opacity: .35; }
}

/* ============================================================
   NAMED MODES — 2-up media cards
   ============================================================ */
.mode-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
/* four named modes read as a 2x2, not 3+1 */
@media (min-width: 768px) { .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mode { display: grid; gap: var(--space-3); align-content: start; }
.mode .shot { border-radius: var(--radius-lg); }
.mode__name {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-lg); color: var(--color-text-hi);
}
.mode__d { color: var(--color-text-secondary); }

/* ---------- benefits: cap at 3 columns so 6 cards = 2 tidy rows ---------- */
@media (min-width: 900px) {
  .feature-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   THE INTERFACE — one wide shot + a row of panel shots
   ============================================================ */
.panel-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panel-grid > :first-child { grid-column: 1 / -1; }
@media (max-width: 767px) { .panel-grid { grid-template-columns: 1fr; } }

/* ============================================================
   USE CASES — 9 self-segmenting doors
   ============================================================ */
.ucase-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
@media (min-width: 900px) { .ucase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ucase {
  display: grid; gap: var(--space-2); align-content: start;
  border: var(--border-hairline); border-radius: var(--radius-lg);
  background: var(--color-surface); padding: var(--space-4);
  transition:
    transform var(--dur-hover) var(--ease-out-expo),
    border-color var(--dur-hover) var(--ease-standard),
    box-shadow var(--dur-hover) var(--ease-standard);
}
.ucase:hover { transform: translateY(-4px); border-color: var(--color-border-bright); box-shadow: var(--shadow-card-hover); }
.js [data-reveal].ucase {
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    translate var(--dur-reveal-rise) var(--ease-soft-spring),
    transform var(--dur-hover) var(--ease-soft-spring),
    border-color var(--dur-hover) var(--ease-swift),
    box-shadow var(--dur-hover) var(--ease-out);
}
.ucase .shot { border-radius: var(--radius-md); }
.ucase__t {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-md); color: var(--color-text-hi); margin-top: var(--space-2);
}
.ucase__d { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* ============================================================
   PROOF — by-hand vs Nester, on slate glass
   ============================================================ */
.glass-panel {
  background: var(--surface-glass);
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-panel);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
}
.proof { padding: var(--space-7) var(--space-6); display: grid; gap: var(--space-5); }
.proof__grid {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: var(--space-5); align-items: stretch;
  max-width: 52rem; margin-inline: auto; width: 100%;
}
@media (max-width: 720px) { .proof__grid { grid-template-columns: 1fr; } .proof__vs { justify-self: center; } }
.proof__col {
  display: grid; gap: var(--space-3); align-content: start;
  border: var(--border-hairline); border-radius: var(--radius-lg);
  padding: var(--space-5); background: var(--color-surface);
}
.proof__col--ours { border-color: var(--color-border-bright); }
.proof__name {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-lg); color: var(--color-text-hi);
}
.proof__col--ours .proof__name { color: var(--color-accent-bright); }
.proof__row {
  display: flex; justify-content: space-between; gap: var(--space-3);
  border-bottom: var(--border-hairline); padding-bottom: var(--space-2);
}
.proof__k { font-size: var(--text-sm); color: var(--color-text-secondary); }
.proof__v {
  font-family: var(--font-mono); font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide); color: var(--color-text-muted);
}
.proof__vs { align-self: center; color: var(--color-text-muted); }
.proof__note { text-align: center; color: var(--color-text-muted); }

/* ============================================================
   CUSTOMER WALL — honest phase-2 slots until real logos land
   ============================================================ */
.wall {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin-bottom: var(--space-5);
}
.wall__slot {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--space-9);
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-muted-fill); color: var(--color-text-muted);
}
.wall__slot .spec-label { color: inherit; }
.wall__logo {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--space-9); padding: var(--space-3);
  border: var(--border-hairline); border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: var(--transition-colors);
}
.wall__logo:hover { border-color: var(--color-border-bright); }
.wall__logo img { max-height: var(--space-6); width: auto; }

/* ============================================================
   GALLERY — captioned nests, mode named in mono
   ============================================================ */
.gal-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
@media (min-width: 900px) { .gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gal { display: grid; gap: var(--space-2); }
.gal .shot { border-radius: var(--radius-md); }
/* until real images land, the tiles carry muted branded tints so the
   section has colour blocking (slate / blue / warm rotation, no rainbow) */
.gal:nth-of-type(3n+1) .shot--ph { background: var(--tile-blue); }
.gal:nth-of-type(3n+2) .shot--ph { background: var(--tile-slate); }
.gal:nth-of-type(3n)   .shot--ph { background: var(--tile-warm); }
.gal__cap { font-size: var(--text-sm); color: var(--color-text-secondary); }
.gal__cap .spec-label { display: block; color: var(--color-accent-bright); margin-bottom: 2px; }

/* ============================================================
   PRICING — one-time seat ladder (3 tiers, featured = flame CTA)
   ============================================================ */
.section__head--center { justify-items: center; text-align: center; }
.buy-reassure {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  justify-content: center; margin-top: var(--space-3);
}
.plan-grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 60rem; margin-inline: auto;
  align-items: stretch;
}
@media (max-width: 860px) { .plan-grid { grid-template-columns: 1fr; max-width: 26rem; } }
.plan { position: relative; display: grid; }
/* the featured tier is decisively raised and lit in the accent blue
   (his centre card pattern): keyline, glow, and a lift on desktop */
.plan--featured {
  border-color: var(--color-border-bright);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-plan-featured);
}
@media (min-width: 861px) {
  .plan--featured { transform: translateY(calc(-1 * var(--space-3))); }
}
.plan__flag {
  position: absolute; top: calc(-1 * var(--space-3)); left: 50%;
  transform: translateX(-50%); white-space: nowrap;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-bright); border-radius: var(--radius-pill);
  padding: 2px var(--space-3); color: var(--color-accent-bright);
  box-shadow: var(--shadow-btn-glow);
}
.buy-under {
  max-width: var(--maxw-prose); margin: var(--space-6) auto 0;
  text-align: center; color: var(--color-text-secondary);
}
.buy-note { text-align: center; margin-top: var(--space-4); color: var(--color-text-muted); }
.buy-demo { text-align: center; margin-top: var(--space-3); color: var(--color-text-secondary); }
.buy-demo a { color: var(--color-accent-bright); }

/* ============================================================
   FREE DEMO band
   ============================================================ */
.demo-band { display: grid; gap: var(--space-3); justify-items: start; }

/* ============================================================
   SEO FOOTER BLOCK — quiet, honest, indexable
   ============================================================ */
.seo-block { border-top: var(--border-hairline); }
.seo-block .container { display: grid; gap: var(--space-3); }
.seo-block__p { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 90ch; }

/* ============================================================
   HUB extras — about band + footer channel rows
   ============================================================ */
.about { display: grid; gap: var(--space-3); }
.about__body { color: var(--color-text-secondary); max-width: var(--maxw-prose); font-size: var(--text-md); }
.footer-directory__soon {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

/* ============================================================
   prefers-reduced-motion — the nest holds its packed end state
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .nestanim__part {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}