/* lodestone.cc home page: the Lodestone products. Colors come from the gem
   logo (images/mark.svg, the launcher's logo); the Host card keeps Host's own
   green. Fonts are shared with the launcher page (Satoshi for text, Clash
   Grotesk for headlines). */

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: 'Clash Grotesk';
  src: url('/fonts/ClashGrotesk-Variable.woff2') format('woff2');
  font-weight: 200 700;
  font-display: swap;
}

:root {
  --bg: #0d0f13;
  --card: #13161b;
  --card-raised: #191d23;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #eceeef;
  --text-muted: #a2a8ae;
  --text-faint: #6c737a;
  /* the gem */
  --gem-green: #22c980;
  --gem-blue: #2f6fa8;
  --gem-violet: #5b4fc0;
  /* lighter versions for text on the dark background */
  --mint: #4fe0a5;
  --sky: #6aaeee;
  --lilac: #9a8ff5;
  /* Lodestone Host's green (dashboard/public/lodestone_logo.svg) */
  --green: #2ef29a;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Moving between the home page and a product page, the logo stays where it is
   and changes into the next page's (where the browser supports it). */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* Header */

.top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px;
}

.brand {
  display: flex;
}

.brand img {
  height: 22px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.github {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: rgba(20, 23, 26, 0.7);
  backdrop-filter: blur(8px);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: border-color 0.15s;
}

.github:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-left: 8px;
  border-left: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.stars[hidden] {
  display: none;
}

/* Hero */

main {
  flex: 1;
}

.hero {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: -74px; /* run the field up under the header */
  padding: calc(74px + clamp(28px, 7vh, 88px)) 24px clamp(64px, 11vh, 120px);
  overflow: hidden;
  isolation: isolate;
}

.field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  /* fade the filings out toward the edges */
  -webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 38%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 80% at 50% 38%, #000 35%, transparent 100%);
}

/* A soft green glow under the logo. */
.hero::before {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(74px + clamp(28px, 7vh, 88px) + 70px);
  width: min(720px, 120vw);
  aspect-ratio: 1.6;
  translate: -50% -50%;
  background:
    radial-gradient(closest-side at 45% 45%, rgba(34, 201, 128, 0.08), transparent),
    radial-gradient(closest-side at 55% 55%, rgba(91, 79, 192, 0.08), transparent),
    radial-gradient(closest-side, rgba(47, 111, 168, 0.08), transparent);
  z-index: -1;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
  text-align: center;
}

/* Keep the filings from running through the text. */
.hero-inner::before {
  content: '';
  position: absolute;
  inset: 150px -6% -4%;
  background: radial-gradient(closest-side, rgba(13, 15, 19, 0.9), rgba(13, 15, 19, 0.6) 55%, rgba(13, 15, 19, 0));
  z-index: -1;
  pointer-events: none;
}

.mark {
  width: 140px;
  height: 140px;
  margin-bottom: 14px;
  view-transition-name: hero-logo;
  filter: drop-shadow(0 12px 30px rgba(47, 111, 168, 0.28));
}

.mark svg {
  display: block;
  overflow: visible;
}

/* The two logos take turns: the one leaving turns away and shrinks, the one
   arriving turns into place, like the gem does on load. */
.mark-logo {
  transform-origin: 512px 512px;
  transition:
    opacity 0.45s ease,
    transform 0.7s cubic-bezier(0.2, 0.9, 0.25, 1);
}

.mark[data-show='launcher'] .mark-host,
.mark[data-show='host'] .mark-launcher {
  opacity: 0;
  transform: rotate(-24deg) scale(0.72);
}

/* The name of the product the logo shows, under it. */
.mark-label {
  display: grid;
  justify-items: center;
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 600;
}

/* The filings run behind the name, so it gets a dark halo to stand on. */
.mark-label a {
  grid-area: 1 / 1;
  color: var(--text);
  text-shadow:
    0 0 3px var(--bg),
    0 0 8px var(--bg),
    0 0 16px var(--bg);
  text-decoration: none;
  transition:
    opacity 0.45s ease,
    color 0.15s;
}

.mark-label a:hover {
  color: #ffffff;
}

.mark-label a[tabindex='-1'] {
  opacity: 0;
  pointer-events: none;
}

/* On load the gem turns into place and the L rises into it. */
.gem-hex {
  transform-origin: 512px 512px;
  animation: gem-in 1.1s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.gem-l {
  animation: l-in 0.9s cubic-bezier(0.2, 0.9, 0.25, 1) 0.35s both;
}


@keyframes gem-in {
  from {
    opacity: 0;
    transform: rotate(-30deg) scale(0.8);
  }
}

@keyframes l-in {
  from {
    opacity: 0;
    transform: translateY(70px);
  }
}


.eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 6px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(20, 23, 26, 0.75);
  backdrop-filter: blur(8px);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
}

.eyebrow-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-faint);
}

.eyebrow-stat {
  color: var(--mint);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3 {
  font-family: 'Clash Grotesk', 'Satoshi', system-ui, sans-serif;
  font-weight: 600;
}

h1 {
  margin: 0;
  font-size: clamp(40px, 6.2vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

h1 .phrase {
  display: inline-block;
}

/* The second line takes a soft version of the gem's colors. */
h1 .phrase + .phrase {
  background: linear-gradient(100deg, #86dcb6, #93b9e8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  margin: 18px 0 0;
  max-width: 44ch;
  color: var(--text-muted);
  font-size: clamp(17px, 2vw, 20px);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #e4e9f2);
  color: #0d0f13;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    filter 0.15s;
}

.button:hover {
  filter: brightness(1.04);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.button:active {
  transform: translateY(1px);
}

.button-quiet {
  background: rgba(26, 30, 34, 0.8);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  backdrop-filter: blur(8px);
}

.button-quiet:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* Products */

.products {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px clamp(48px, 8vh, 96px);
  scroll-margin-top: 24px;
}

.section-title {
  margin: 0 0 20px;
  color: var(--text-faint);
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.grid {
  display: grid;
  grid-template-columns: 1.22fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}

.card {
  --mx: 50%;
  --my: 0%;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--card-raised), var(--card));
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color 0.2s,
    transform 0.2s;
}

/* A light that follows the pointer across the card. */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(106, 174, 238, 0.09), transparent 60%);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
  z-index: -1;
}

.card:hover {
  border-color: var(--border-strong);
}

.card:hover::before {
  opacity: 1;
}

.card-launcher {
  grid-row: span 2;
}

.card-copy {
  padding: 28px 28px 0;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.card-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
}

/* The square marks fill their box and the hexagon doesn't, so the squares are
   drawn smaller to look the same size. The margin keeps them in the same 28px
   slot, so every label starts at the same place. */
.card-icon-tile {
  width: 24px;
  height: 24px;
  margin: 2px;
}

.card-icon-term {
  border-radius: 6px;
  background: linear-gradient(160deg, #23292e, #15191c);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  color: var(--green);
}

.kicker {
  margin: 0;
  color: var(--text-faint);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card h3 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.card p {
  margin: 10px 0 0;
  max-width: 46ch;
  color: var(--text-muted);
}

.card .kicker {
  margin: 0;
  line-height: 1;
}

.card-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  color: var(--sky);
  text-decoration: none;
  font-weight: 700;
}

.card-link span {
  transition: transform 0.2s;
}

.card-link:hover span {
  transform: translateX(3px);
}

.card-host .card-link:not(.card-link-quiet) {
  color: var(--green);
}

.card-link-quiet {
  color: var(--text-muted);
  font-weight: 500;
}

.card-link-quiet:hover {
  color: var(--text);
}

/* Make the whole card a target for its first link. */
.card-copy > .card-link::after,
.card-links > .card-link:first-child::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
}

.card-link-quiet {
  position: relative;
  z-index: 1;
}

.card-visual {
  position: relative;
  flex: 1;
  margin-top: 28px;
  pointer-events: none;
}

/* Launcher: the library screenshot, tipped back into the card. */
.launcher-visual {
  min-height: 300px;
  perspective: 1400px;
}

.launcher-visual::before {
  content: '';
  position: absolute;
  inset: 10% -10% -30% 10%;
  background: radial-gradient(closest-side, rgba(34, 201, 128, 0.25), rgba(47, 111, 168, 0.18) 50%, rgba(91, 79, 192, 0) 100%);
  filter: blur(10px);
}

.launcher-visual img {
  position: absolute;
  width: auto;
  max-width: none;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  transform-origin: 0 0;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Two screenshots, one behind the other, tipped back into the card. */
.shot-back {
  left: 150px;
  top: 0;
  height: 74%;
  opacity: 0.55;
  filter: saturate(0.8) brightness(0.75);
  transform: rotateX(10deg) rotateY(-14deg) rotateZ(2deg) translateZ(-40px);
}

.shot-front {
  left: 28px;
  top: 84px;
  height: 82%;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 40px 80px rgba(0, 0, 0, 0.6);
  transform: rotateX(10deg) rotateY(-14deg) rotateZ(2deg);
}

.card-launcher:hover .shot-front {
  transform: rotateX(6deg) rotateY(-9deg) rotateZ(1deg) translate3d(-6px, -10px, 0);
}

.card-launcher:hover .shot-back {
  transform: rotateX(8deg) rotateY(-12deg) rotateZ(2deg) translate3d(14px, -14px, -40px);
}

/* Host: a little server list. */
.host-visual {
  padding: 0 28px 28px;
}

.servers {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(10, 12, 14, 0.55);
  overflow: hidden;
}

.servers-head {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.servers-online {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}

.pulse {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--green);
  animation: ping 2s ease-out infinite;
}

@keyframes ping {
  to {
    transform: scale(3);
    opacity: 0;
  }
}

.servers ul {
  margin: 0;
  padding: 4px 0;
  list-style: none;
}

.servers li {
  display: grid;
  grid-template-columns: 28px 1fr auto auto 8px;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
}

.servers li img {
  border-radius: 6px;
  image-rendering: pixelated;
}

.server-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

.server-name small {
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 500;
}

.server-players {
  color: var(--text-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b4248;
}

.status.is-on {
  background: var(--green);
  box-shadow: 0 0 10px rgba(46, 242, 154, 0.7);
}

/* The Shared tag the launcher and Host put on a server shared with friends. */
.tag {
  padding: 1px 7px;
  border: 1px solid rgba(46, 242, 154, 0.35);
  border-radius: 6px;
  color: var(--green);
  font-size: 11px;
  font-weight: 600;
}

.spark {
  display: block;
  width: 100%;
  height: 48px;
  border-top: 1px solid var(--border);
}

/* CLI: a terminal that types out a few commands. */
.cli-visual {
  padding: 0 28px 28px;
}

.term {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #0a0c0d;
  overflow: hidden;
}

.term-bar {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.term-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2a3035;
}

.term-body {
  min-height: calc(6 * 1.6em + 28px);
  margin: 0;
  padding: 14px 16px;
  color: var(--text);
  font-family: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}

.t-cmd::before {
  content: '$ ';
  color: var(--green);
}

.t-out {
  color: var(--text-faint);
}

.caret {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.2em;
  background: var(--green);
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.card-icon-connect {
  border-radius: 6px;
  background: linear-gradient(160deg, #123430, #0e1a18);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  color: var(--mint);
}

/* The launcher's Play button, in the launcher's blue. */
.play {
  padding: 4px 12px;
  border-radius: 7px;
  background: #13668a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

/* Lodestone Connect: its own section between the hero and the products. */

.together {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px clamp(64px, 11vh, 120px);
  scroll-margin-top: 24px;
  text-align: center;
}

.together-head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.together-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--mint);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.together-kicker .card-icon-connect {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

.together h2 {
  margin: 0;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.together-lede {
  margin: 16px 0 0;
  max-width: 46ch;
  color: var(--text-muted);
  font-size: clamp(17px, 2vw, 19px);
}

/* Two computers and the connection between them. */
.link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(80px, 12vw, 160px) minmax(0, 1fr);
  align-items: center;
  max-width: 980px;
  margin: clamp(36px, 6vh, 56px) auto 0;
  text-align: left;
}

.link-side {
  margin: 0;
}

.link-side figcaption {
  margin-top: 10px;
  color: var(--text-faint);
  font-size: 13px;
  text-align: center;
}

.panel {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--card-raised), var(--card));
  overflow: hidden;
}

.panel-rows {
  margin: 0;
  padding: 4px 0;
  list-style: none;
}

.panel-rows li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 14px;
}

.panel-rows li img {
  border-radius: 6px;
  image-rendering: pixelated;
}

.panel-rows li + li {
  border-top: 1px solid var(--border);
}

.panel-rows .panel-invite {
  grid-template-columns: 1fr auto;
}

.invite {
  overflow: hidden;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(10, 12, 14, 0.6);
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.copy {
  padding: 4px 12px;
  border-radius: 7px;
  background: #17866f;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.panel-rows .panel-join {
  grid-template-columns: 1fr;
  gap: 8px;
}

.join-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.join-bar span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #13668a, var(--sky));
  transform-origin: left;
}

.wire {
  position: relative;
  height: 28px;
}

.wire-line {
  position: absolute;
  left: -1px;
  right: -1px;
  top: 50%;
  height: 2px;
  translate: 0 -50%;
  background: linear-gradient(90deg, rgba(46, 242, 154, 0.5), rgba(31, 191, 168, 0.85), rgba(46, 242, 154, 0.5));
}

.wire-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(46, 242, 154, 0.9);
  opacity: 0;
  animation: travel 2.4s linear infinite;
}

.wire-dot + .wire-dot {
  animation-direction: reverse;
  animation-delay: -1.2s;
}

@keyframes travel {
  0% {
    left: 0;
    opacity: 0;
  }
  15%,
  85% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

.wire-lock {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  translate: -50% -50%;
  border: 1px solid rgba(31, 191, 168, 0.55);
  border-radius: 50%;
  background: #0e1a18;
  color: var(--mint);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 40px;
  max-width: 980px;
  margin: clamp(40px, 7vh, 64px) auto 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  text-align: left;
}

.steps li {
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-bottom: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--mint);
  font-size: 13px;
  font-weight: 700;
}

.steps h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}

.steps p {
  margin: 6px 0 0;
  color: var(--text-muted);
}

/* The friend list: a quieter extra under the steps. */
.together-extra {
  max-width: 62ch;
  margin: clamp(28px, 5vh, 40px) auto 0;
  color: var(--text-muted);
  font-size: 15px;
}

.together-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: clamp(32px, 5vh, 48px) 0 0;
  color: var(--text-faint);
  font-size: 14px;
}

.together-note svg {
  flex: none;
  color: var(--mint);
}

/* Questions */

.faq {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px clamp(48px, 8vh, 96px);
}

.faq-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 40px;
  margin: 0;
}

.faq-list > div {
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.faq-list dt {
  font-family: 'Clash Grotesk', 'Satoshi', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.faq-list dd {
  margin: 10px 0 0;
  max-width: 46ch;
  color: var(--text-muted);
}

.faq-list a {
  color: var(--sky);
  text-decoration: none;
}

.faq-list a:hover {
  text-decoration: underline;
}

/* Footer */

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px 32px;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 14px;
}

.foot-links {
  display: flex;
  gap: 20px;
  margin-left: auto;
}

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

.foot a:hover {
  color: var(--text);
}

@media (max-width: 900px) {
  .grid,
  .faq-list {
    grid-template-columns: 1fr;
  }

  .card-launcher {
    grid-row: auto;
  }

  .launcher-visual {
    min-height: 0;
    aspect-ratio: 1.5;
  }
}

@media (max-width: 760px) {
  .link {
    grid-template-columns: 1fr;
    max-width: 460px;
  }

  .wire {
    width: 28px;
    height: 72px;
    margin: 4px auto;
  }

  .wire-line {
    left: 50%;
    right: auto;
    top: -1px;
    bottom: -1px;
    width: 2px;
    height: auto;
    translate: -50% 0;
    background: linear-gradient(180deg, rgba(46, 242, 154, 0.5), rgba(31, 191, 168, 0.85), rgba(46, 242, 154, 0.5));
  }

  .wire-dot {
    left: 50%;
    animation-name: travel-down;
  }

  .steps {
    grid-template-columns: 1fr;
    max-width: 460px;
  }
}

@keyframes travel-down {
  0% {
    top: 0;
    opacity: 0;
  }
  15%,
  85% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

@media (max-width: 560px) {
  .faq {
    padding-left: 16px;
    padding-right: 16px;
  }

  .top {
    padding: 16px;
  }

  .nav {
    gap: 14px;
  }


  .github-label {
    display: none;
  }


  h1 {
    font-size: clamp(30px, 8.6vw, 40px);
  }

  .hero {
    margin-top: -66px;
    padding: calc(66px + 28px) 16px 56px;
  }

  .hero::before {
    top: calc(66px + 28px + 52px);
  }

  .mark,
  .mark svg {
    width: 104px;
    height: 104px;
  }

  .mark {
    margin-bottom: 12px;
  }

  .mark-label {
    margin-bottom: 18px;
  }

  .hero-inner::before {
    inset: 90px -20% -8%;
  }

  .products,
  .together {
    padding-left: 16px;
    padding-right: 16px;
  }

  .card-copy {
    padding: 22px 22px 0;
  }

  .host-visual,
  .cli-visual {
    padding: 0 22px 22px;
  }

  .shot-front {
    left: 22px;
  }

  .shot-back {
    left: 90px;
  }

  .foot {
    padding-left: 16px;
    padding-right: 16px;
  }

  .foot-links {
    margin-left: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .gem-hex,
  .gem-l,
  .pulse::after,
  .wire-dot,
  .caret {
    animation: none;
  }

  .mark-logo,
  .mark-label a,
  .launcher-visual img {
    transition: none;
  }
}