/* ===========================================================
   Coming-soon home page (/). Loads on top of base.css and reuses its
   tokens, so the holding page reads as the same brand as the funnel it
   sits in front of.

   The real landing page is not in this repo — it is hosted elsewhere.
   This is what answers the root of this deployment until then.
   =========================================================== */

.hm-wrap {
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 56px) clamp(16px, 4vw, 24px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.hm-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 22px;
  padding: clamp(30px, 6vw, 48px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: #fff;
  background-color: var(--panel);
  background-image:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.028) 0 2px, transparent 2px 7px),
    radial-gradient(120% 90% at 50% 0%, var(--panel-hover) 0%, var(--panel) 55%, var(--panel-2) 100%);
  box-shadow: 0 22px 50px rgba(var(--line-rgb), 0.16);
}
.hm-card > * { position: relative; }

.hm-brand { margin-bottom: 4px; }

.hm-flag {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 7px 15px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
}

.hm-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(28px, 7vw, 42px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.14;
  text-wrap: balance;
}
/* Breaks as a unit, never mid-phrase. */
.hm-nb { white-space: nowrap; }

.hm-sub {
  margin: 0;
  font-size: clamp(14.5px, 3.6vw, 16px);
  line-height: 1.65;
  color: var(--on-panel-muted);
  max-width: 46ch;
  text-wrap: pretty;
}

.hm-meta {
  margin: 6px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  line-height: 1.7;
  color: var(--on-panel-muted-2);
}
.hm-meta a { color: var(--lime-soft); text-decoration: underline; }

/* ---------- Review panel ----------
   Deliberately styled as scaffolding rather than as part of the page: it
   is dashed, off to one side of the card, and labelled. Nobody should be
   able to look at this deployment and wonder whether the list of routes
   is meant to ship. */

.hm-review {
  width: 100%;
  border: 1px dashed rgba(var(--line-rgb), 0.28);
  border-radius: 16px;
  padding: clamp(18px, 4vw, 24px);
}
.hm-review-head {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hm-review-head span { opacity: 0.65; }

.hm-review ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hm-review a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid rgba(var(--line-rgb), 0.12);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.hm-review a:hover {
  border-color: var(--accent);
  transform: translateX(2px);
}
.hm-route {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-text);
}
.hm-what {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
}

.hm-review-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-4);
}

@media (prefers-reduced-motion: reduce) {
  .hm-review a:hover { transform: none; }
}