/* ==========================================================================
   Home page (artboard 1a) — hero, hero shot, viewer band, four doors and
   the beta call to action.
   Depends on tokens.css, site.css and components.css.
   ========================================================================== */

/* --- Hero -----------------------------------------------------------------
   The sigil overhangs the section on two sides; .page-card's overflow does
   the clipping, exactly as the artboard's card does.                        */

.hero {
  position: relative;
  padding: 96px var(--page-gutter) 88px;
}

.hero__sigil {
  position: absolute;
  top: -120px;
  right: -90px;
  width: 640px;
  height: 640px;
  animation: psDrift 180s linear infinite;
  pointer-events: none;
}

/* The logo is inlined rather than linked for two reasons: its artwork is
   scaled past the edges of its own viewBox, so it needs `overflow:visible`
   that an <img> would clip; and the design fades its two layers by different
   amounts, which is only reachable when the groups are in the document. */
.hero__sigil-art,
.hero__sigil-art svg {
  width: 100%;
  height: 100%;
}

.hero__sigil-art svg {
  overflow: visible;
}

.hero__sigil-art [name="traces"] { opacity: .13; }
.hero__sigil-art [name="Initials"] { opacity: .1; }

.hero__sigil-sparks {
  position: absolute;
  inset: 0;
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 740px;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-cyan);
}

.hero__title {
  font-size: 76px;
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.hero__lead {
  max-width: 620px;
  font-size: 22px;
  line-height: 1.5;
  color: var(--hero-lead);
  text-wrap: pretty;
}

.hero__lead strong {
  font-weight: 700;
  color: var(--text-primary);
}

.hero__sub {
  max-width: 560px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--hero-sub);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* --- Hero screenshot ------------------------------------------------------- */

.hero-shot {
  padding: 0 var(--page-gutter) 88px;
}

.hero-shot__frame {
  display: flex;
  border: 1px solid var(--border);
  background: var(--bg-recessed);
  overflow: hidden;
}

.hero-shot__frame img {
  width: 100%;
  height: auto;
}

/* --- "The viewer is free, forever" ----------------------------------------- */

.viewer-band {
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 56px;
  align-items: center;
  padding: 56px var(--page-gutter);
  border-top: 1px solid var(--hairline);
  background: var(--bg-panel);
}

.viewer-band__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.viewer-band__title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.viewer-band__body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* --- Four doors ------------------------------------------------------------- */

.doors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
}

/* Tighter than the three-door row was: the fourth column buys its width out
   of the side padding rather than out of the text measure. */
.door {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 40px 34px;
}

.door:not(:last-child) {
  border-right: 1px solid var(--hairline);
}

.door__title {
  font-size: 24px;
  font-weight: 700;
}

.door__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}

.door__link {
  margin-top: 6px;
}

/* --- Beta call to action ---------------------------------------------------- */

.beta-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 56px var(--page-gutter);
  border-top: 1px solid var(--hairline);
  background: var(--bg-panel);
}

.beta-cta__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.beta-cta__title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.beta-cta__body {
  font-size: 16px;
  color: var(--text-muted);
}

.beta-cta .btn {
  padding: 16px 26px;
  white-space: nowrap;
}

/* ==========================================================================
   WP9 — responsive
   See the breakpoint table at the foot of site.css. Nothing here matches at
   1240px or wider.
   ========================================================================== */

/* The upper bound of every clamp below is the artboard's own size, and the
   middle term is written so it still resolves to that size at 1239px: 76px
   is 6.14vw of 1238, so the type is exactly 76px on the last pixel before
   the breakpoint and starts shrinking only after it. The step across 1240
   is nil rather than merely small. */
@media (max-width: 1239px) {
  .hero__title { font-size: clamp(34px, 6.14vw, 76px); }
}

/* The sigil overhangs the hero by 90px on the right and is clipped by the
   page card, so it can never widen the document — but at three-quarters of
   the card's width it stops being a watermark and starts being the page.
   It comes down in two steps and then goes, which is what the design does
   with it anywhere it will not fit. */
@media (max-width: 1100px) {
  .hero__sigil {
    top: -90px;
    right: -70px;
    width: 480px;
    height: 480px;
  }

  /* The doors fold 4 → 2 here: below this a quarter-width column is narrower
     than its own heading. The rule between them turns the same way the
     single-column step turns it. */
  .doors { grid-template-columns: repeat(2, 1fr); }

  .door:not(:last-child) { border-right: 0; }

  .door:nth-child(odd) { border-right: 1px solid var(--hairline); }

  .door:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
}

@media (max-width: 900px) {
  .hero { padding: 72px var(--page-gutter) 64px; }

  .hero__lead { font-size: 20px; }

  .hero-shot { padding: 0 var(--page-gutter) 64px; }

  .viewer-band {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
    padding: 44px var(--page-gutter);
  }

  .doors { grid-template-columns: 1fr; }

  .door { padding: 32px var(--page-gutter); }

  /* The rule between the doors turns with them. */
  .door:nth-child(odd) { border-right: 0; }

  .door:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .beta-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 44px var(--page-gutter);
  }
}

@media (max-width: 620px) {
  .hero__sigil { display: none; }

  .hero { padding: 52px var(--page-gutter) 48px; }

  .hero__inner { gap: 20px; }

  /* The eyebrow wraps to two lines here, and a centred dot lands between
     them. It belongs against the first line, and it is 6px wide with nothing
     to lose, so it stops shrinking too. */
  .hero__eyebrow { align-items: flex-start; }

  .hero__eyebrow .status-dot {
    flex: none;
    margin-top: 5px;
  }

  .hero__lead { font-size: 18px; }

  .hero__sub { font-size: 16px; }

  .hero__actions { flex-wrap: wrap; }

  .viewer-band__title { font-size: 27px; }

  .viewer-band__body { font-size: 16px; }

  .door__title { font-size: 21px; }

  .beta-cta__title { font-size: 25px; }
}