/* =========================================================
   Wisemelon — standalone pages (404, coming soon)
   Loaded after index.css, which supplies the tokens and the
   --u design-pixel unit every size below is written in.
   ========================================================= */

/* =========================================================
   STANDALONE PAGES — 404 / coming soon
   Same frame, same grid as the hero, so a dead end still
   feels like part of the site.
   ========================================================= */
.pg {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(760 * var(--u));
  border-bottom: 1px solid var(--rule);
}

.pg__grid {                            /* the hero's 11 x 6 hairline grid */
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: calc(100% / 11) calc(100% / 6);
  background-position: -1px -1px;
}

.pg__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: calc(96 * var(--u)) calc(100% / 11);
}

.pg__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--u));
  margin: 0 0 calc(26 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.pg__eyebrow::before {
  content: "";
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  border-radius: 50%;
  background: var(--lime-ico);
}

.pg__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: calc(64 * var(--u));
  line-height: calc(77 * var(--u));
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.pg__sub {
  margin: calc(22 * var(--u)) 0 0;
  font-size: calc(20 * var(--u));
  line-height: calc(32 * var(--u));
  color: var(--muted);
}

.pg__actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--u));
  margin-top: calc(40 * var(--u));
}
.pg__actions .ico {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pg__more {
  margin-top: calc(64 * var(--u));
  padding-top: calc(28 * var(--u));
  border-top: 1px solid var(--rule);
}
.pg__more-title {
  margin: 0 0 calc(14 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.pg__more-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--u)) calc(28 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: calc(18 * var(--u));
  font-weight: 500;
}
.pg__more-list a {
  color: var(--nav-link);
  border-bottom: 1px solid transparent;
  transition: color .14s ease, border-color .14s ease;
}
.pg__more-list a:hover { color: var(--ink); border-bottom-color: var(--lime-ico); }

@media (max-width: 1179px) {
  .pg { min-height: 0; }
  .pg__inner { padding: 56px 22px 64px; }
  .pg__grid { display: none; }
  .pg__title { font-size: 34px; line-height: 42px; }
  .pg__sub   { font-size: 16px; line-height: 26px; }
  .pg__title br, .pg__sub br { display: none; }
  .pg__actions { margin-top: 28px; gap: 12px; }
  .pg__more { margin-top: 44px; }
}