/* =========================================================================
   PicoSonde — gate.css  (coming-soon GATE page only)
   Page-specific styles. Tokens + components live in base.css; extend, don't
   duplicate. Dark sky hero with a light readable panel for the story.
   ========================================================================= */

/* Full-viewport-ish dark sky hero that holds the whole teaser. */
.gate__hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--ps-hero-grad);
  color: #fff;
  padding-block: clamp(40px, 8vw, 88px);
}

.gate__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Brand mark + wordmark sit on the dark hero, so force light text. */
.gate__brand {
  color: #fff;
  margin-bottom: clamp(20px, 4vw, 32px);
}
.gate__brand:hover { color: #fff; }
.gate__brand .brand__mark { width: 34px; height: 34px; }

.gate__eyebrow { color: var(--ps-cyan); }

.gate__title { color: #fff; margin-bottom: .35em; }

.gate__tagline {
  font-size: 1.15em;
  color: rgba(255, 255, 255, .85);
  max-width: 56ch;
  margin: 0 auto clamp(28px, 5vw, 44px);
}

/* Translucent light panel keeps the long story readable over the dark sky. */
.gate__panel {
  width: 100%;
  max-width: 720px;
  text-align: left;
  background: var(--ps-surface);
  color: var(--ps-text);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow);
  padding: clamp(24px, 4vw, 40px);
}

.gate__panel-title { margin-bottom: .8em; }

.gate__about-head {
  color: var(--ps-muted);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .6em;
}

/* About copy stays in a comfortable measure (~62ch). */
.gate__panel p { max-width: 62ch; }

/* Two product renders side by side, stacked on mobile. */
.gate__renders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2.5vw, 20px);
  margin: clamp(24px, 4vw, 32px) 0 0;
}
.gate__renders img {
  width: 100%;
  border-radius: var(--ps-radius-sm);
  background: var(--ps-surface-2);
  border: 1px solid var(--ps-border);
}

@media (max-width: 560px) {
  .gate__renders { grid-template-columns: 1fr; }
}

/* CTA block under the story. */
.gate__cta {
  margin-top: clamp(28px, 5vw, 40px);
  padding-top: clamp(24px, 4vw, 32px);
  border-top: 1px solid var(--ps-border);
  text-align: center;
}
.gate__cta-head { margin-bottom: .7em; }

/* Slim footer with copyright + discreet preview/skip link. */
.gate__footer { padding-block: clamp(24px, 3vw, 36px); }
.gate__footer .site-footer__grid { align-items: center; }
.gate__preview-link { font-size: .9rem; }