/* ==========================================================================
   FIRSTPEAK STUDIO — SIGNAL (the command center)
   Page-specific styles for /signal. Built on the V2 tokens (:root in v2.css)
   and reuses the websites.css device / proof / plate / web-step blocks, so this
   file only carries what is Signal's own: the command-center hero and the
   differentiator grid. Doctrine matches v2 + websites: content visible by
   default, gold only on live / interactive / accent surfaces, readable with no
   motion. Leaves v2.css and websites.css untouched.
   ========================================================================== */

/* ---- the command-center hero (granite, no photo) ------------------------ */
.sig-hero { position: relative; overflow: hidden; background: var(--granite); color: var(--bone);
  min-height: clamp(440px, 70vh, 600px); display: flex; align-items: flex-end; }
/* a faint command-grid texture so the granite reads as a console, not a void */
.sig-hero__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(216,154,69,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,154,69,.05) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center;
  -webkit-mask-image: radial-gradient(120% 100% at 72% 12%, #000 0%, transparent 70%);
          mask-image: radial-gradient(120% 100% at 72% 12%, #000 0%, transparent 70%); }
.sig-hero__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 70% at 74% 8%, rgba(216,154,69,.20), rgba(34,38,45,0) 62%); }
.sig-hero__inner { position: relative; z-index: 2; width: 100%;
  padding-top: clamp(6rem, 13vh, 9rem); padding-bottom: clamp(3rem, 8vh, 5.5rem); }

/* ---- the live-demo header (reuses .proof / .device from websites.css) ---- */
/* the embedded command center is a desktop dashboard, so give it 16:9 like the
   GLASSHOUR feature does */
.sig-demo .device__screen { aspect-ratio: 16 / 9; background: #0f1216; }
.sig-demo .proof__loadbtn { background: linear-gradient(180deg, rgba(20,24,30,.35), rgba(20,24,30,.72)); }
/* with no poster image the screen is a clean dark console; keep it intentional */
.sig-demo .device__screen::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .6;
  background-image:
    linear-gradient(rgba(216,154,69,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,154,69,.06) 1px, transparent 1px);
  background-size: 40px 40px; }
.sig-demo.is-live .device__screen::before { display: none; }

/* ---- what it does: the differentiator grid (bone plate) ----------------- */
/* the section is a bare .plate; give it the bone surface its cards are
   colored for (without it, the section inherits the granite body and the
   granite-on-granite strong/borders go invisible). Page-scoped, mirrors how
   /websites uses .web-value; leaves v2.css/websites.css untouched. */
.sig-does { background: var(--bone); color: var(--granite); }
.sig-grid { margin-top: clamp(2.4rem, 5vh, 3.4rem);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); }
.sig-card { position: relative; padding-top: 1.1rem; border-top: 2px solid var(--granite); }
.sig-card__no { font-family: var(--font-display); font-weight: 800; font-size: .82rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.sig-card__h { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.42rem); letter-spacing: -.01em; margin: .55rem 0 .5rem; }
.sig-card__p { font-size: .95rem; line-height: 1.65; color: var(--slate); max-width: 40ch; }
.sig-card__p strong { color: var(--granite); font-weight: 600; }

/* ---- the loop (granite plate, reuses .web-step type scale) --------------- */
.sig-loop { background: var(--granite); color: var(--bone); }
.sig-loop .web-step { border-top-color: rgba(216,154,69,.5); }
.sig-loop .web-step__h { color: var(--bone); }
.sig-loop .web-step__p { color: rgba(242,238,230,.7); }
/* the gold-deep / accent-light tokens these inherit only pass on bone; remap
   to the granite-safe ramp so the step labels + eyebrow clear AA on granite. */
.sig-loop .web-step__no { color: var(--gold); }
.sig-loop .eyebrow { color: var(--accent-dark); }
.sig-loop__close { margin-top: clamp(2.2rem, 5vh, 3.2rem); font-family: var(--font-serif);
  font-style: italic; font-size: clamp(1.05rem, 1.6vw, 1.28rem); line-height: 1.6;
  color: rgba(242,238,230,.82); max-width: 52ch; }
.sig-loop__close em { font-style: italic; color: var(--gold); }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 860px) {
  .sig-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .sig-grid { grid-template-columns: 1fr; }
}