/* Hey Open, holding site.
   Standalone: nothing here is shared with the Next application, and the three
   pages are plain files that can be dropped on any static host. */

:root {
  --page: #f8f9fa;
  --ink: #0f172a;
  --body: #475569;
  --muted: #64748b;
  --rule: rgba(15, 23, 42, 0.1);
  --rule-soft: rgba(15, 23, 42, 0.07);
  --card: #ffffff;
  --accent: #ff6600;
  --measure: 760px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ── The holding page ─────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background-color: #eef0f0;
  background-image: url('hero-bg.webp');
  background-position: bottom center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  padding: 24px 16px 32px;
  text-align: center;
}

.hero__inner {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 680px;
}

.hero__title {
  margin: 0;
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
  color: rgb(71, 85, 105);
}

/* The chat box and the waitlist button stood here. A holding page should not
   imply either is available, so the space is held by the one honest claim. */
.hero__soon {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 28px;
  padding: 11px 22px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 102, 0, 0.26);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero__soon::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.72); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__soon::before { animation: none; }
}

/* Under the line rather than pinned to the foot of the hero. The lower
   third of the backdrop is dark rock, and slate text on it cannot be read.
   Up here the sky is behind them and the page is still one screen. */
.hero__links {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid rgba(71, 85, 105, 0.16);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 22px;
  font-size: 0.8rem;
  color: rgba(71, 85, 105, 0.85);
}

.hero__links a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(71, 85, 105, 0.28);
  padding-bottom: 2px;
}

.hero__links a:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 600px) {
  .hero__title { font-size: 1.75rem; }
  .hero__soon { font-size: 0.74rem; padding: 10px 18px; }
}

/* ── The legal pages ──────────────────────────────────────────────── */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 14px 24px;
  background: rgba(248, 249, 250, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
}

.bar nav {
  display: flex;
  gap: 20px;
  font-size: 0.86rem;
}

.bar nav a {
  color: var(--muted);
  text-decoration: none;
}

.bar nav a:hover { color: var(--ink); }
.bar nav a[aria-current='page'] { color: var(--accent); font-weight: 600; }

.doc {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 56px 24px 88px;
}

.doc h1 {
  margin: 0 0 12px;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}

.dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 40px;
  font-size: 0.9rem;
  color: var(--muted);
}

.doc h2 {
  margin: 48px 0 16px;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

.doc h3 {
  margin: 32px 0 14px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

.doc p {
  margin: 0 0 16px;
  text-wrap: pretty;
}

.doc p.tight { margin-bottom: 10px; }

.doc p.caps {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--ink);
}

.doc strong { color: var(--ink); font-weight: 700; }

.doc a { color: var(--accent); text-decoration: none; }
.doc a:hover { text-decoration: underline; }

.doc ol.alpha,
.doc ul.alpha {
  margin: 0 0 20px;
  padding-left: 26px;
}

.doc ol.alpha { list-style-type: lower-alpha; }

.doc li { margin-bottom: 10px; padding-left: 5px; }
.doc li::marker { color: var(--muted); }

.notice h2 { font-size: 1rem; font-weight: 800; }

/* A bracketed run of capitals is a fact only the company can supply. Marked,
   because one sitting mid-sentence in a clause about refunds is easy to read
   straight past. */
.slot {
  padding: 0 2px;
  border-radius: 4px;
  border: 1px dashed rgba(255, 102, 0, 0.6);
  background: rgba(255, 102, 0, 0.08);
  color: #c24e00;
  font-size: 0.86em;
  font-weight: 700;
}

.note {
  margin: 20px 0;
  padding: 16px 20px;
  border: 1px dashed rgba(255, 102, 0, 0.45);
  border-radius: 10px;
  background: rgba(255, 102, 0, 0.05);
  font-size: 0.88rem;
}

.note b {
  display: block;
  margin-bottom: 7px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c24e00;
}

.foot {
  border-top: 1px solid var(--rule-soft);
  padding: 28px 24px 40px;
  text-align: center;
  font-size: 0.84rem;
  color: var(--muted);
}

.foot p { margin: 0 0 12px; }

.foot nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
}

.foot nav a { color: var(--muted); text-decoration: none; }
.foot nav a:hover { color: var(--accent); }

@media (max-width: 600px) {
  .doc { padding: 36px 20px 64px; }
  .doc h1 { font-size: 2.1rem; }
  .doc h2 { font-size: 1.2rem; margin-top: 40px; }
}