/*
  Purpose: Shared charcoal + purple "clay edition" theme for alternate marketing pages
  Pairs with /landing-clay.html (which keeps its own inline copy of these tokens).
  Last modified: 2026-07-27 | Author: Auto (Composer) | Completeness: 100
  CTA styles: Primary purple gradient · Secondary flat black · Tertiary ghost (subtle outline, white text)
*/
@import url("/marketing-copy-volume.css");
:root {
  --charcoal-0: #131316;
  --charcoal-1: #1b1b1f;
  --charcoal-2: #222226;
  --charcoal-3: #2b2b31;
  --clay-line: #38383f;
  --ink: #f2f0ec;
  --ink-dim: #b9b6c2;
  --ink-faint: #807d8c;
  --purple: #7040dd;
  --purple-hi: #9c72fd;
  --purple-mid: #8556f1;
  --purple-soft: #b18cfd;
  --teal: #2ab3a3;
  --green: #58c98a;
  --font-head: "Avenir Next", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Avenir Next", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --radius-clay: 22px;
  --maxw: 1160px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.clay-page {
  background: var(--charcoal-1);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.clay-page::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; }
.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--purple-soft);
}
.clay-page h1, .clay-page h2, .clay-page h3 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.015em; line-height: 1.08; }
.clay-page h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); }
.clay-page h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
p.lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink-dim); }

/* nav — logo left; Wait List + Login right (no product-app links) */
.clay-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--charcoal-0) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--clay-line);
}
.clay-nav .nav-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 28px;
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.clay-nav .nav-logo { flex-shrink: 0; }
.clay-nav .nav-logo img { height: 26px; width: auto; display: block; max-width: min(200px, 42vw); }
.clay-nav .nav-links { display: none; } /* density: jumps live in optional thin strip only */
.clay-nav .nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}
.clay-nav .nav-cta { padding: 9px 18px; font-size: 14px; border-radius: 11px; }

/* Optional thin on-page jump strip (homepage-style, low cognitive load) */
.mkt-jumps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
  margin: 0;
  padding: 5px 28px 7px;
  box-sizing: border-box;
  border-top: 1px solid color-mix(in srgb, var(--clay-line) 55%, transparent);
  background: color-mix(in srgb, var(--charcoal-0) 38%, transparent);
}
.mkt-jumps::-webkit-scrollbar { display: none; }
.mkt-jumps a {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--ink-dim) 72%, transparent);
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0.85;
}
.mkt-jumps a:hover,
.mkt-jumps a:focus-visible,
.mkt-jumps a.is-here {
  color: color-mix(in srgb, var(--teal) 70%, var(--ink));
  opacity: 1;
  outline: none;
}

/* Marketing CTA styles — Primary / Secondary / Tertiary */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600; font-size: 15.5px;
  padding: 13px 26px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s, box-shadow .18s, background .18s, border-color .18s, color .18s;
}
/* Primary — purple gradient */
.btn-primary {
  background: linear-gradient(160deg, var(--purple-hi), var(--purple));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 22px rgba(108, 59, 217, 0.42), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover {
  transform: translateY(-2px);
  border-width: 1px;
  border-color: color-mix(in srgb, #fff 38%, transparent);
  box-shadow: 0 8px 24px rgba(108, 59, 217, 0.4), inset 0 1px 0 rgba(255,255,255,.18);
}
/* Secondary — flat black; green outline on hover */
.btn-secondary {
  background: #000;
  color: #fff;
  border-color: #000;
  box-shadow: none;
}
.btn-secondary:hover {
  transform: translateY(-2px);
  background: #000;
  border-width: 1px;
  border-color: color-mix(in srgb, var(--green) 45%, transparent);
  box-shadow: none;
}
/* Tertiary — ghost: subtle outline, white text */
.btn-tertiary,
.btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  box-shadow: none;
}
.btn-tertiary:hover,
.btn-ghost:hover {
  transform: translateY(-2px);
  color: #fff;
  border-width: 1px;
  border-color: color-mix(in srgb, #fff 36%, transparent);
  background: color-mix(in srgb, #fff 4%, transparent);
}
.nav-cta { padding: 9px 20px; font-size: 14px; border-radius: 11px; }
.btn-block { display: block; width: 100%; text-align: center; }

/* prose + cards */
.clay-prose p { color: var(--ink-dim); margin: 0 0 1.2em; max-width: 46em; }
.clay-prose strong { color: var(--ink); }
.clay-card {
  background: var(--charcoal-2);
  border: 1px solid var(--clay-line);
  border-radius: var(--radius-clay);
  box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.045);
}
.clay-figure { margin: 0; }
.clay-figure img {
  width: 100%; height: auto; display: block; /* aspect ratio locked to the source image */
  border-radius: var(--radius-clay);
  border: 1px solid var(--clay-line);
  box-shadow: 0 24px 44px rgba(0,0,0,.4);
}
.clay-figure figcaption {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 12px; text-align: center;
}

/* footer — legal + calm destinations only (no Hub /app) */
.clay-footer,
.mkt-footer {
  padding: 44px 0 60px;
  border-top: 1px solid var(--clay-line);
  background: var(--charcoal-0);
  position: relative;
  z-index: 2;
}
.clay-footer .foot-inner,
.mkt-footer .foot-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
  width: 100%;
  box-sizing: border-box;
}
.clay-footer img,
.mkt-footer img { height: 24px; width: auto; opacity: .92; display: block; }
.clay-footer .foot-links,
.mkt-footer .foot-links {
  display: flex;
  gap: 22px;
  margin-left: auto;
  flex-wrap: wrap;
}
.clay-footer .foot-links a,
.mkt-footer .foot-links a {
  color: var(--ink-faint);
  font-size: 13.5px;
  text-decoration: none;
}
.clay-footer .foot-links a:hover,
.mkt-footer .foot-links a:hover { color: var(--ink); }
.clay-footer .foot-tag,
.mkt-footer .foot-tag {
  width: 100%;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  letter-spacing: .08em;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 99; background: var(--purple); color: #fff; padding: 8px 14px; border-radius: 8px; }

@media (max-width: 900px) {
  .mkt-jumps {
    justify-content: flex-start;
    gap: 14px;
    padding-left: 20px;
    padding-right: 20px;
  }
}