/* ============================================================
   gathered.chat - Home page (story 002 landing page)
   ------------------------------------------------------------
   The pre-launch landing page that sells the guest wedge, the
   host archive, calm notifications, the MCP-native angle, and
   per-event pricing. Fixed cream/dark surfaces by design - see
   the "Marketing-fixed neutrals" note in tokens/colors.css - so
   this file reads the raw gc- and cl- tokens, not the semantic
   --bg/--fg aliases that follow the visitor's OS color scheme.
   (Never write the raw token names as a glob pair in a comment
   here - an asterisk-slash sequence ends the comment early and
   silently eats the next rule.)
   ============================================================ */

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

main {
  background: var(--gc-cream);
  color: var(--gc-dark);
}

/* Headings inherit the semantic --fg from base.css, which flips to
   cream under a dark OS scheme - invisible on this page's fixed-cream
   surfaces. Pin them to the fixed dark ink; the dark sections
   (.wedge-card h3, .mcp-card h2) re-pin cream with higher specificity. */
main h1,
main h2,
main h3 {
  color: var(--gc-dark);
}

.kicker {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  /* cl-clay-deep, not cl-clay: this sits on the fixed-cream surface, and
     cl-clay alone falls just under AA (4.5:1) for small uppercase text. */
  color: var(--cl-clay-deep);
  margin: 0 0 var(--sp-3);
}

/* .gc-eyebrow (base.css) reads the semantic --fg-muted alias, which
   follows the visitor's OS color scheme. This page's hero sits on a
   fixed-cream surface regardless of scheme, so the eyebrow pins to the
   fixed marketing ink-tan token instead. */
.hero__eyebrow { color: var(--gc-ink-tan); }

.body-copy {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--gc-ink-muted);
  max-width: 46ch;
  margin: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 11px 20px;
  min-height: var(--tap-min);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft);
}

.btn--cta {
  background: var(--cl-clay-deep);
  color: #FFFFFF;
}
.btn--cta:hover { background: var(--cl-clay-press); color: #FFFFFF; }

.btn--ghost {
  background: transparent;
  color: var(--gc-dark);
  /* Fixed ink-tan, not the semantic --border-strong: that alias is tuned
     for the app's dark-mode-following surfaces and falls under the 3:1
     non-text contrast minimum against this button's fixed-white card in
     the (default) light OS scheme. */
  border-color: var(--gc-ink-tan);
}
.btn--ghost:hover { border-color: var(--cl-clay); color: var(--cl-clay-deep); }

.btn--lg {
  padding: 15px 26px;
  font-size: var(--fs-base);
}

.btn--block { width: 100%; }

/* ---------- Hero ---------- */
.hero { padding: var(--sp-9) 0 var(--sp-8); }

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-7);
  align-items: center;
}

.hero__eyebrow { margin-bottom: var(--sp-3); }

.hero__title {
  font-size: var(--fs-4xl);
  line-height: 1.02;
  margin: 0 0 var(--sp-4);
  max-width: 16ch;
}

.hero__sub {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--gc-ink-muted);
  max-width: 34ch;
  margin: 0 0 var(--sp-6);
}

.join-card {
  background: #FFFFFF;
  border: 1px solid var(--gc-cream-edge);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  padding: var(--sp-6);
  position: relative;
}

.join-card__badge {
  position: absolute;
  top: -13px;
  left: var(--sp-6);
  background: var(--gc-dark);
  color: var(--gc-cream);
  padding: 5px 12px;
  border-radius: var(--r-pill);
}

.join-card__qr {
  display: block;
  width: 150px;
  height: 150px;
  margin: var(--sp-2) auto var(--sp-4);
  max-width: 100%;
}
.qr-ink { fill: var(--gc-dark); }
.qr-clay { fill: var(--cl-clay); }

.join-card__caption {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--gc-ink-muted);
  margin: 0;
}

.join-card__proof {
  text-align: center;
  color: var(--cl-clay-deep);
  margin: var(--sp-1) 0 0;
}

/* ---------- Wedge strip (dark, "how it works") ---------- */
.wedge-strip {
  background: var(--gc-dark);
  padding: var(--sp-8) 0;
}

.wedge-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}

.wedge-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--cl-clay-dark) 16%, transparent);
  color: var(--cl-clay-dark);
  margin-bottom: var(--sp-4);
}

.wedge-card h3 {
  font-size: var(--fs-lg);
  color: var(--gc-cream);
  margin: 0 0 var(--sp-2);
}

.wedge-card p {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--gc-mid-sage);
  margin: 0;
}

/* ---------- Split content blocks (keepsake, notifications) ---------- */
.split-block { padding: var(--sp-8) 0; }

.split-block__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  align-items: center;
}

.split-block__grid--reverse .split-block__copy-order { order: 2; }
.split-block__grid--reverse .split-block__visual-order { order: 1; }

.split-block h2 {
  font-size: var(--fs-2xl);
  line-height: 1.08;
  margin: 0 0 var(--sp-4);
}

/* Archive-download card (keepsake side visual) */
.archive-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  background: #FFFFFF;
  border: 1px solid var(--gc-cream-edge);
  border-left: 3px solid var(--cl-clay);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: var(--sp-5);
}

.archive-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--cl-clay-tint);
  color: var(--cl-clay-deep);
  flex: none;
}

.archive-card__title {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--gc-dark);
  margin: 0 0 var(--sp-1);
}

.archive-card__body {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--gc-ink-muted);
  margin: 0;
}

/* Calm-notifications mock */
.noise-mock {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.noise-mock__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: #FFFFFF;
  border: 1px solid var(--gc-cream-edge);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--gc-ink-muted);
}

.noise-mock__item--dim {
  /* A lighter but still AA-compliant ink, not an opacity fade - opacity
     would drop the effective contrast against the white card below AA. */
  color: var(--gc-ink-tan);
  font-weight: 400;
}

.noise-mock__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cl-clay);
  flex: none;
}

.noise-mock__caption {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--gc-ink-tan);
  margin: var(--sp-1) 0 0;
}

/* ---------- MCP-native card ---------- */
.mcp-block { padding: 0 0 var(--sp-8); }

.mcp-card {
  background: #1F2123;
  color: var(--gc-cream);
  border-radius: var(--r-xl);
  padding: var(--sp-7);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  align-items: center;
}

.mcp-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: color-mix(in oklab, var(--cl-clay-dark) 14%, transparent);
  color: var(--cl-clay-dark);
  border: 1px solid color-mix(in oklab, var(--cl-clay-dark) 30%, transparent);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-normal);
  margin-bottom: var(--sp-5);
}

.mcp-card h2 {
  color: var(--gc-cream);
  font-size: var(--fs-2xl);
  margin: 0 0 var(--sp-4);
}

.mcp-card p {
  color: var(--gc-mid-sage);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  margin: 0;
}

.terminal-mock {
  background: #141618;
  border: 1px solid var(--gc-dark-edge);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
}

.terminal-mock p { margin: 0 0 var(--sp-3); color: var(--gc-cream); }
.terminal-mock p:last-child { margin-bottom: 0; }
.terminal-mock__user { color: var(--gc-mid-sage); }
.terminal-mock__reply { color: var(--cl-clay-dark); }

/* ---------- Pricing ---------- */
.pricing-block { padding: var(--sp-8) 0; }

.pricing-block__intro {
  text-align: center;
  max-width: 46ch;
  margin: 0 auto;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

.price-card {
  background: #FFFFFF;
  border: 1px solid var(--gc-cream-edge);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  text-align: center;
}

.price-card--mid {
  border-color: var(--cl-clay);
  box-shadow: 0 0 0 1px var(--cl-clay);
}

.price-card__amount {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  color: var(--gc-dark);
  margin: 0;
}

.price-card__period {
  font-size: var(--fs-sm);
  color: var(--gc-ink-tan);
  margin: 0 0 var(--sp-3);
}

.price-card__who {
  font-size: var(--fs-sm);
  color: var(--gc-ink-muted);
  margin: 0 0 var(--sp-5);
  min-height: 3.2em;
}

/* ---------- Closing waitlist ---------- */
.closing-block { padding: var(--sp-8) 0 var(--sp-9); }

.closing-block__inner {
  text-align: center;
  max-width: 52ch;
  margin: 0 auto;
}

.closing-block h2 { margin-bottom: var(--sp-4); }

.closing-block .body-copy {
  max-width: none;
  margin: 0 auto var(--sp-6);
}

.waitlist-embed:empty { display: none; }

.closing-block__fallback {
  font-size: var(--fs-sm);
  color: var(--gc-ink-tan);
  margin: 0;
}

/* Override the global `a` rule (base.css), which reads the semantic
   --accent alias - it follows OS color scheme and can under-contrast
   against this section's fixed-cream background. */
.closing-block__fallback a {
  color: var(--cl-clay-deep);
  border-bottom-color: color-mix(in oklab, var(--cl-clay-deep) 40%, transparent);
}
.closing-block__fallback a:hover,
.closing-block__fallback a:focus-visible {
  color: var(--cl-clay-press);
  border-bottom-color: var(--cl-clay-press);
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .hero__grid,
  .split-block__grid,
  .mcp-card { grid-template-columns: 1fr; }

  .hero__grid { text-align: left; }
  .hero__title { font-size: var(--fs-3xl); max-width: none; }
  .hero__sub { max-width: none; }

  .split-block__grid--reverse .split-block__copy-order,
  .split-block__grid--reverse .split-block__visual-order { order: initial; }

  .wedge-strip__grid,
  .pricing-grid { grid-template-columns: 1fr 1fr; }

  .body-copy { max-width: none; }
}

@media (max-width: 480px) {
  .wedge-strip__grid,
  .pricing-grid { grid-template-columns: 1fr; }

  .hero { padding: var(--sp-7) 0 var(--sp-6); }
  .hero__title { font-size: var(--fs-2xl); }

  .join-card { padding: var(--sp-5); }

  .price-card__who { min-height: 0; }

  .mcp-card,
  .split-block__grid,
  .archive-card { gap: var(--sp-5); }
}

/* Any hover-driven micro-motion respects reduced motion globally via
   tokens/effects.css; this page adds no autoplaying or scroll-triggered
   animation, so no further override is needed here. */