.marketing-page {
  --background: #080a09;
  --surface: #111411;
  --text: #f2f1eb;
  --muted: #a3a8a3;
  --mint: #a8e6cb;
  --mint-deep: #163c31;
  --paper: #e9e5dc;
  --line: rgba(242, 241, 235, 0.14);
  overflow-x: hidden;
  background: var(--background);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.marketing-page .site-header {
  position: relative;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.marketing-page .header-inner,
.marketing-page .site-footer,
.marketing-main {
  width: min(calc(100% - 3rem), 1440px);
}

.marketing-page .header-inner { min-height: 88px; }

.marketing-page .brand {
  gap: 0.65rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.marketing-page .brand img { border-radius: 0.75rem; }

.marketing-page .button {
  min-height: 52px;
  padding: 0.75rem 1.4rem;
  border-radius: 0.55rem;
  background: var(--mint);
  color: #08110d;
  font-size: 0.9rem;
  font-weight: 700;
  transition: background 160ms ease, transform 160ms ease;
}

.marketing-page .button:hover {
  background: var(--text);
  color: #08110d;
  transform: translateY(-2px);
}

.marketing-main { padding: 0; }

.marketing-page .hero {
  min-height: calc(100svh - 88px);
  grid-template-columns: minmax(0, 1.05fr) minmax(430px, 0.82fr);
  gap: clamp(2rem, 6vw, 7rem);
  padding: clamp(2.5rem, 5svh, 5rem) clamp(1rem, 3.5vw, 4rem) clamp(3.5rem, 7svh, 7rem);
  overflow: hidden;
}

.marketing-page .hero-copy { max-width: 820px; }

.marketing-page .hero-mark {
  display: block;
  margin-bottom: clamp(2.5rem, 4.5svh, 4.5rem);
  border-radius: 1.1rem;
  animation: doubledeck-logo-pulse 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: center;
}

.marketing-page .hero h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(4.6rem, min(9vw, 11svh), 9rem);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.085em;
}

.marketing-page .hero-lede {
  max-width: 49rem;
  margin: clamp(1.75rem, 3.5svh, 3rem) 0 0;
  color: #c4c8c3;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  line-height: 1.5;
}

.marketing-page .hero-waitlist-link { margin-top: 1.5rem; }

.marketing-page .held-phone-stage {
  position: relative;
  width: min(100%, 620px, 48svh);
  aspect-ratio: 2 / 3;
  justify-self: center;
  align-self: center;
  isolation: isolate;
}

.marketing-page .held-phone-screen,
.marketing-page .held-phone-still {
  position: absolute;
  top: 5.2%;
  left: 21.45%;
  display: block;
  width: 47.15%;
  height: 67.45%;
  border-radius: 13% / 6%;
  background: #000;
  object-fit: cover;
}

.marketing-page .held-phone-still { z-index: 0; }
.marketing-page .held-phone-screen { z-index: 1; }

.marketing-page .held-phone-foreground {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.marketing-page .visual-sequence {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(6rem, 12svh, 10rem);
}

.marketing-page .showcase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(520px, 1.28fr);
  align-items: center;
  min-height: clamp(680px, calc(100svh - 2rem), 820px);
  overflow: hidden;
  border-radius: clamp(1.5rem, 3vw, 2.5rem);
}

.marketing-page .showcase-heading {
  position: relative;
  z-index: 2;
  padding: clamp(2.5rem, 5vw, 5rem);
}

.marketing-page .showcase-heading h2 {
  margin: 0;
  font-size: clamp(3rem, min(5.5vw, 9svh), 6rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.065em;
}

.marketing-page .module-kicker {
  color: #8f958f;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.marketing-page .leaderboard-showcase {
  background: var(--mint);
  color: #0b1712;
}

.marketing-page .leaderboard-composition,
.marketing-page .stats-composition,
.marketing-page .play-composition {
  position: relative;
  width: 100%;
  min-height: clamp(560px, calc(100svh - 8rem), 720px);
}

.marketing-page .leaderboard-composition {
  display: grid;
  place-items: center;
  padding: clamp(2.5rem, 6vw, 6rem);
}

.marketing-page .leaderboard-card {
  position: relative;
  z-index: 1;
  width: min(100%, 620px);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 2rem;
  background: #070908;
  color: var(--text);
  box-shadow: 0 3rem 7rem rgba(7, 29, 21, 0.28);
  transform: rotate(-2deg);
}

.marketing-page .leaderboard-card .module-kicker { margin-bottom: 1.5rem; }

.marketing-page .metric-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  margin-bottom: 1.2rem;
}

.marketing-page .metric-tab {
  padding: 0.72rem 0.5rem;
  border-radius: 999px;
  background: #121412;
  color: #828682;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease;
}

.marketing-page .metric-tab.is-active {
  background: var(--mint);
  color: #07110d;
}

.marketing-page .leaderboard-list {
  margin: 0;
  padding: 0;
  list-style: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

.marketing-page .leaderboard-card.is-switching .leaderboard-list {
  opacity: 0.28;
  transform: translateY(0.3rem);
}

.marketing-page .leaderboard-list li {
  display: grid;
  grid-template-columns: 2rem 2.6rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 4.6rem;
  padding: 0 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.marketing-page .leaderboard-list li.is-you {
  margin-inline: -0.4rem;
  padding-inline: 1.2rem;
  border: 0;
  border-radius: 1.1rem;
  background: rgba(168, 230, 203, 0.1);
}

.marketing-page .rank,
.marketing-page .leaderboard-list strong {
  color: #8e938e;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
}

.marketing-page .leaderboard-list .avatar {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  font-size: 1.15rem;
}

.marketing-page .leaderboard-list .player {
  font-size: 0.95rem;
  font-weight: 600;
}

.marketing-page .leaderboard-list small {
  margin-left: 0.4rem;
  color: var(--mint);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
}

.marketing-page .leaderboard-list .is-you .rank,
.marketing-page .leaderboard-list .is-you strong { color: var(--mint); }

.marketing-page .floating-rank {
  position: absolute;
  right: -0.05em;
  bottom: -0.28em;
  color: rgba(9, 36, 27, 0.09);
  font-size: clamp(12rem, 24vw, 25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.11em;
}

.marketing-page .stats-showcase {
  background: var(--paper);
  color: #111713;
}

.marketing-page .stats-composition {
  display: grid;
  place-items: center;
  padding: clamp(2.5rem, 6vw, 6rem);
}

.marketing-page .stats-indicator-visual {
  position: relative;
  z-index: 1;
  width: min(74%, 405px);
  overflow: hidden;
  margin: 0;
  border-radius: 17% / 11%;
  box-shadow: 0 3.5rem 7rem rgba(39, 74, 61, 0.28);
  transform: rotate(-2deg);
}

.marketing-page .stats-indicator-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.marketing-page .play-showcase {
  background: var(--mint-deep);
}

.marketing-page .play-composition {
  display: grid;
  grid-template-columns: 1.28fr 0.72fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-content: center;
  padding: clamp(2.5rem, 6vw, 6rem);
}

.marketing-page .private-table-module {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 2rem;
  background: #080a09;
  box-shadow: 0 3rem 7rem rgba(0, 0, 0, 0.28);
}

.marketing-page .solo-bots-visual {
  position: relative;
  isolation: isolate;
  align-self: center;
  width: min(100%, 620px);
  min-height: 430px;
  justify-self: center;
}

.marketing-page .solo-bots-visual::after {
  position: absolute;
  right: 8%;
  bottom: 9%;
  left: 8%;
  z-index: -1;
  height: 16%;
  border-radius: 50%;
  background: rgba(2, 8, 6, 0.48);
  filter: blur(28px);
  content: "";
}

.marketing-page .bot-avatar {
  position: absolute;
  display: block;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: clamp(9rem, 15vw, 13rem);
  line-height: 1;
  filter: drop-shadow(0 2rem 1.8rem rgba(0, 0, 0, 0.28));
  -webkit-user-select: none;
  user-select: none;
}

.marketing-page .bot-avatar-finn {
  top: 32%;
  left: -3%;
  z-index: 1;
  transform: rotate(-10deg) scale(0.88);
}

.marketing-page .bot-avatar-aya {
  top: 5%;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%) scale(1.08);
}

.marketing-page .bot-avatar-nia {
  top: 31%;
  right: -3%;
  z-index: 2;
  transform: rotate(9deg) scale(0.92);
}

.marketing-page .private-table-module {
  display: flex;
  min-height: 390px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  transform: translateY(2rem) rotate(2deg);
}

.marketing-page .friend-stack {
  display: flex;
  justify-content: center;
  margin: 2rem 0 1.5rem;
}

.marketing-page .friend-stack i {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  margin-left: -0.65rem;
  place-items: center;
  border: 3px solid #080a09;
  border-radius: 50%;
  background: var(--mint);
  color: #092017;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.marketing-page .friend-stack i:nth-child(2) { background: #e4dfd5; }
.marketing-page .friend-stack i:nth-child(3) { background: #242825; color: #a4aaa4; }

.marketing-page .private-table-module > strong {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.marketing-page .invite-code {
  margin-top: 2rem;
  color: var(--mint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(2.3rem, 5vw, 4.5rem);
  letter-spacing: 0.12em;
}

.marketing-page .invite-label {
  color: #6f746f;
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.marketing-page .closing-statement {
  padding: clamp(7rem, 16svh, 12rem) 0 clamp(5rem, 10svh, 8rem);
  border-top: 1px solid var(--line);
}

.marketing-page .closing-statement h2 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(4.5rem, min(11vw, 14svh), 11rem);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -0.085em;
}

.marketing-page .site-footer {
  border-color: var(--line);
  padding-block: 2.5rem 3.5rem;
  color: #777d78;
}

.marketing-page .site-footer nav a { color: #8f958f; }
.marketing-page .site-footer nav a:hover { color: var(--text); }

@media (max-width: 1040px) {
  .marketing-page .hero {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
  }

  .marketing-page .showcase {
    grid-template-columns: minmax(240px, 0.62fr) minmax(440px, 1.38fr);
  }

  .marketing-page .stats-composition,
  .marketing-page .play-composition {
    padding-inline: 2.5rem;
  }
}

@media (max-width: 760px) {
  .marketing-page .header-inner,
  .marketing-page .site-footer,
  .marketing-main {
    width: min(calc(100% - 2rem), 1440px);
  }

  .marketing-page .header-inner {
    min-height: 72px;
    flex-direction: row;
    align-items: center;
    padding: 0;
  }

  .marketing-page .brand { font-size: 0; }

  .marketing-page .brand img {
    width: 36px;
    height: 36px;
  }

  .marketing-page .hero {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    padding: 3rem 0 2rem;
    text-align: center;
  }

  .marketing-page .hero-copy { justify-self: center; }

  .marketing-page .hero-mark { margin: 0 auto 2.75rem; }

  .marketing-page .hero-waitlist-link {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }

  .marketing-page .hero h1 {
    font-size: clamp(4rem, 21vw, 6.5rem);
    line-height: 0.86;
  }

  .marketing-page .hero-lede {
    max-width: 34rem;
    margin-inline: auto;
    padding-inline: 0.5rem;
  }

  .marketing-page .held-phone-stage {
    width: min(112vw, 570px);
  }

  .marketing-page .visual-sequence { padding-block: 7.5rem; }

  .marketing-page .showcase {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: 760px;
  }

  .marketing-page .showcase-heading {
    padding: 2.25rem 2rem 0;
  }

  .marketing-page .showcase-heading h2 {
    font-size: clamp(3.2rem, 14vw, 5rem);
  }

  .marketing-page .leaderboard-composition,
  .marketing-page .stats-composition,
  .marketing-page .play-composition {
    min-height: 620px;
    padding: 2rem;
  }

  .marketing-page .leaderboard-card {
    width: min(92%, 520px);
    transform: rotate(-1deg);
  }

  .marketing-page .stats-composition {
    place-items: center;
  }

  .marketing-page .stats-indicator-visual {
    width: min(64vw, 360px);
  }

  .marketing-page .play-composition {
    grid-template-columns: 1fr;
    align-content: start;
  }

  .marketing-page .solo-bots-visual { min-height: 330px; }

  .marketing-page .bot-avatar {
    font-size: clamp(8rem, 34vw, 10.5rem);
  }

  .marketing-page .private-table-module {
    min-height: 300px;
    transform: translateY(-1rem) rotate(1deg);
  }

  .marketing-page .closing-statement h2 {
    font-size: clamp(4rem, 19vw, 7rem);
  }

  .marketing-page .site-footer { flex-direction: column; }
}

@media (max-width: 420px) {
  .marketing-page .held-phone-stage { width: min(118vw, 500px); }

  .marketing-page .showcase { min-height: 720px; }

  .marketing-page .leaderboard-composition,
  .marketing-page .stats-composition,
  .marketing-page .play-composition {
    min-height: 540px;
    padding: 1.25rem;
  }

  .marketing-page .leaderboard-card { width: 100%; }

  .marketing-page .leaderboard-list li {
    grid-template-columns: 1.4rem 2.25rem 1fr auto;
    gap: 0.5rem;
    min-height: 4rem;
    padding-inline: 0.4rem;
  }

  .marketing-page .stats-indicator-visual { width: min(68vw, 310px); }

  .marketing-page .play-composition { grid-template-columns: 1fr; }

  .marketing-page .solo-bots-visual { min-height: 290px; }

  .marketing-page .private-table-module { min-height: 270px; }
}

@media (prefers-reduced-motion: reduce) {
  .marketing-page .button { transition: none; }
  .marketing-page .held-phone-screen { display: none; }
}

/* Launch signup keeps one live Kit form shared between the footer and dialog. */
.marketing-page .launch-status { display:flex;align-items:center;gap:9px;color:#a3ada6;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase; }
.marketing-page .launch-status::before { content:"";width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:var(--mint); }
.marketing-page .hero-copy { text-align:center; }
.marketing-page .hero-mark { margin-inline:auto; }
.marketing-page .hero h1 { font-size:clamp(4.6rem,8vw,8.2rem); }
.marketing-page .held-phone-stage { width:min(100%,530px); }
.marketing-page .hero-waitlist-link { display:flex;width:fit-content;min-width:210px;justify-content:center;text-align:center;margin-inline:auto; }
.marketing-page .launch-note { color:#a3ada6;font-size:.8rem;line-height:1.5;margin:14px auto 0;text-align:center; }
.marketing-page .closing-statement { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(2rem,6vw,5rem);align-items:center;padding-inline:clamp(1rem,3.5vw,4rem); }
.marketing-page .closing-statement h2 { font-size:clamp(4rem,6.6vw,7rem); }
.marketing-page .closing-signup { min-width:0;text-align:center;scroll-margin-top:2rem; }
.marketing-page .closing-signup h3 { margin:0 0 1rem;font-size:clamp(1.8rem,3vw,2.4rem);font-weight:400;line-height:1.1;letter-spacing:-.055em; }
.marketing-page .signup-widget { min-width:0;width:100%;text-align:center; }
.marketing-page .signup-promise { color:#b9c3bc;font-size:.95rem;line-height:1.6;margin:0 0 1.2rem; }
.marketing-page .signup-fallback,.marketing-page .signup-privacy { color:#a3ada6;font-size:.75rem;line-height:1.6;margin:1rem 0 0;text-align:center;overflow-wrap:anywhere; }
.marketing-page .signup-widget a { color:inherit;text-decoration:underline;text-underline-offset:3px; }
.marketing-page .signup-fallback a { display:inline-block;padding-block:.5rem; }
.marketing-page .email-list { min-height:175px;min-width:0; }
.marketing-page .email-list .formkit-form,
.marketing-page .email-list .formkit-form [data-style="minimal"],
.marketing-page .email-list .formkit-fields,
.marketing-page .email-list .formkit-field,
.marketing-page .email-list .formkit-submit { width:100% !important;max-width:100% !important;min-width:0 !important; }
.marketing-page .email-list .formkit-form { border:0 !important;background:transparent !important;color:var(--text) !important;overflow:visible !important; }
.marketing-page .email-list .formkit-form [data-style="minimal"] { padding:0 !important; }
.marketing-page .email-list .formkit-header,
.marketing-page .email-list .formkit-subheader { display:none !important; }
.marketing-page .email-list .formkit-fields { display:grid !important;grid-template-columns:minmax(0,1fr) !important;gap:.65rem !important;margin:0 !important; }
.marketing-page .email-list .formkit-field,
.marketing-page .email-list .formkit-submit { margin:0 !important; }
.marketing-page .email-list .formkit-input,
.marketing-page .email-list .formkit-submit { min-height:54px !important;border-radius:.6rem !important;font-family:inherit !important;font-size:16px !important; }
.marketing-page .email-list .formkit-input { width:100% !important;border:1px solid #435348 !important;background:#0b100d !important;color:var(--text) !important;text-align:center !important; }
.marketing-page .email-list .formkit-input::placeholder { color:#a3ada6 !important;opacity:1; }
.marketing-page .email-list .formkit-input:focus { outline:2px solid var(--mint) !important;outline-offset:2px; }
.marketing-page .email-list .formkit-submit { border:0 !important;background:var(--mint) !important;color:#08110d !important;font-weight:700 !important;text-align:center !important; }
.marketing-page .email-list .formkit-submit:focus-visible { outline:2px solid var(--mint) !important;outline-offset:3px; }
.marketing-page .email-list .formkit-submit > span { text-align:center !important; }
.marketing-page .email-list .formkit-guarantee { color:#a3ada6 !important;font-family:inherit !important;font-size:.75rem !important;line-height:1.6 !important;text-align:center !important;margin:1rem 0 0 !important; }
.marketing-page .email-list .formkit-powered-by-convertkit-container { justify-content:center !important; }
.marketing-page .signup-dialog { box-sizing:border-box;width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:40px;overflow-y:auto;overscroll-behavior:contain;border:1px solid #35423a;border-radius:24px;background:#101712;color:var(--text);text-align:center;box-shadow:0 32px 100px #0008; }
.marketing-page .signup-dialog::backdrop { background:#030806b8;backdrop-filter:blur(7px); }
.marketing-page .signup-dialog > img { display:block;margin:0 auto;border-radius:8px; }
.marketing-page .signup-dialog h2 { font-size:clamp(2.8rem,5vw,3.5rem);font-weight:400;line-height:.94;letter-spacing:-.065em;margin:24px 0 20px; }
.marketing-page #signup-description { color:#b9c3bc;font-size:.95rem;line-height:1.6;margin:0 0 24px; }
.marketing-page .signup-dialog .signup-promise { display:none; }
.marketing-page .signup-close { position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;background:transparent;color:#b9c3bc;font-family:inherit;font-size:28px;line-height:1;cursor:pointer; }
.signup-open { overflow:hidden; }
@media (max-width:760px) {
  .marketing-page .brand { font-size:14px; }
  .marketing-page .launch-status { font-size:9px;letter-spacing:.04em;gap:6px; }
  .marketing-page .hero { gap:1.5rem;padding-top:2rem; }
  .marketing-page .hero-mark { width:42px;height:42px;margin-bottom:2rem; }
  .marketing-page .hero h1 { font-size:clamp(4rem,22vw,7rem); }
  .marketing-page .hero-lede { font-size:1rem;margin-top:1.5rem; }
  .marketing-page .held-phone-stage { width:min(122vw,590px); }
  .marketing-page .launch-note { font-size:.75rem; }
  .marketing-page .closing-statement { grid-template-columns:minmax(0,1fr);gap:3rem;padding:4rem 1rem;text-align:center; }
  .marketing-page .closing-statement h2 { margin-inline:auto;font-size:clamp(3.5rem,16vw,5rem); }
  .marketing-page .signup-dialog { padding:36px 24px 28px;max-height:calc(100dvh - 24px); }
}