/*
  Use layer: project / marketing site.
  Load after dist/kit.css and one theme. Harbor remains the craft lander.
  This file is the quiet product-site extras.
*/

.hero--plain {
  background-color: transparent;
  padding-inline: 0;
  box-shadow: none;
  border-radius: 0;
}

.hero--still {
  align-items: center;
  text-align: center;
  max-width: calc(var(--spore-space-8) * 30);
  margin-inline: auto;
  padding-block: var(--spore-space-8);
}

.hero.hero--plain.hero--still {
  padding-block: var(--spore-space-8);
}

.hero--still h1,
.hero--still h2 {
  max-width: 16ch;
  font-weight: var(--spore-weight-regular);
  font-size: clamp(var(--spore-text-2xl), 3.6vw + 1rem, calc(var(--spore-text-2xl) * 2.05));
  letter-spacing: calc(var(--spore-tracking-display) - 0.01em);
}

.hero--still h2 {
  font-size: clamp(var(--spore-text-xl), 2vw + 1rem, calc(var(--spore-text-2xl) * 1.35));
}

.hero--still > p {
  max-width: 42ch;
  color: var(--spore-muted-fg);
}

.hero--still .row {
  justify-content: center;
}

.hero--still .form-block {
  width: min(100%, calc(var(--spore-space-8) * 16));
  align-self: center;
  text-align: start;
}

.hero--still .chip,
.hero--still .avatar {
  align-self: center;
}

.hero--still .stack {
  width: min(100%, calc(var(--spore-space-8) * 16));
  align-self: center;
}

.hero--still .stack .btn {
  width: 100%;
  justify-content: center;
}

.container--wide {
  width: 100%;
  max-width: calc(var(--spore-space-8) * 36);
  margin-inline: auto;
  padding-inline: var(--spore-space-4);
  padding-block: var(--spore-space-5);
}

.kicker {
  margin: 0;
  font-family: var(--spore-font-label);
  font-size: var(--spore-text-xs);
  font-weight: var(--spore-weight-label);
  letter-spacing: var(--spore-tracking-label);
  line-height: var(--spore-leading-snug);
  text-transform: uppercase;
  color: var(--spore-muted-fg);
}

.lede {
  display: flex;
  flex-direction: column;
  gap: var(--spore-space-3);
  max-width: 42ch;
  margin-inline: auto;
  text-align: center;
}

.lede p {
  margin: 0;
  color: var(--spore-muted-fg);
}

.lede--start {
  margin-inline: 0;
  text-align: start;
  max-width: 48ch;
}

.split {
  display: grid;
  gap: var(--spore-space-8);
  align-items: center;
}

.copy {
  display: grid;
  gap: var(--spore-space-3);
  max-width: 46ch;
  text-indent: 0;
}

.copy p {
  margin: 0;
  text-indent: 0;
}

.split > .copy > h1 {
  max-width: 12ch;
  font-weight: var(--spore-weight-regular);
  font-size: clamp(var(--spore-text-2xl), 3.4vw + 1rem, calc(var(--spore-text-2xl) * 2));
}

.faq {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.metrics {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border: 1px solid var(--spore-line);
  border-radius: var(--spore-radius-lg);
  background-color: var(--spore-surface);
  box-shadow: var(--spore-edge), var(--spore-shadow);
  overflow: hidden;
}

.metric {
  display: flex;
  flex-direction: column;
  gap: var(--spore-space-2);
  padding: var(--spore-space-5) var(--spore-space-6);
  border: 0;
  border-bottom: 1px solid var(--spore-line);
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

.metric:last-child {
  border-bottom: 0;
}

.metric__value {
  margin: 0;
  font-family: var(--spore-font-display);
  font-size: clamp(var(--spore-text-xl), 1.6vw + 1rem, calc(var(--spore-text-2xl) * 1.15));
  font-weight: var(--spore-weight-display);
  letter-spacing: var(--spore-tracking-display);
  line-height: var(--spore-leading-tight);
}

.metric__label {
  margin: 0;
  font-family: var(--spore-font-label);
  font-size: var(--spore-text-xs);
  font-weight: var(--spore-weight-label);
  letter-spacing: var(--spore-tracking-label);
  text-transform: uppercase;
  color: var(--spore-muted-fg);
}

.board {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--spore-line);
  border-radius: var(--spore-radius-lg);
  background-color: var(--spore-glass-heavy);
  box-shadow: var(--spore-edge), var(--spore-shadow);
  overflow: hidden;
}

.board__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spore-space-4);
  align-items: baseline;
  padding: var(--spore-space-4) var(--spore-space-5);
  border-top: 1px solid var(--spore-line);
}

.board__row:first-child {
  border-top: 0;
}

.board__when {
  margin: 0;
  color: var(--spore-muted-fg);
  font-size: var(--spore-text-sm);
}

.board__what {
  margin: 0;
  font-weight: var(--spore-weight-medium);
  text-align: end;
}

.slot-list {
  display: flex;
  flex-direction: column;
  gap: var(--spore-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.slot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--spore-space-4);
  align-items: start;
  padding: var(--spore-space-5);
  border: 1px solid var(--spore-line);
  border-radius: var(--spore-radius-lg);
  background-color: var(--spore-glass-heavy);
  box-shadow: var(--spore-edge), var(--spore-shadow);
}

.slot__when {
  margin: 0;
  font-family: var(--spore-font-label);
  font-size: var(--spore-text-sm);
  font-weight: var(--spore-weight-label);
  letter-spacing: var(--spore-tracking-label);
  color: var(--spore-accent);
  min-width: 6ch;
}

.fare {
  display: flex;
  flex-direction: column;
  gap: var(--spore-space-3);
}

.fare__price {
  margin: 0;
  font-family: var(--spore-font-display);
  font-size: clamp(var(--spore-text-xl), 2vw + 1rem, calc(var(--spore-text-2xl) * 1.4));
  font-weight: var(--spore-weight-display);
  letter-spacing: var(--spore-tracking-display);
  line-height: var(--spore-leading-tight);
}

.fare__period {
  margin: 0;
  color: var(--spore-muted-fg);
  font-size: var(--spore-text-sm);
}

.picks {
  display: flex;
  flex-direction: column;
  gap: var(--spore-space-3);
}

.pick {
  display: grid;
  gap: var(--spore-space-4);
  align-items: center;
  padding: var(--spore-space-4) var(--spore-space-5);
  border: 1px solid var(--spore-line);
  border-radius: var(--spore-radius-lg);
  background-color: var(--spore-surface);
  box-shadow: var(--spore-edge), var(--spore-shadow);
}

.pick .mark {
  width: var(--spore-space-8);
  height: var(--spore-space-8);
  padding: var(--spore-space-2);
  border-radius: var(--spore-radius-md);
  background-color: color-mix(in srgb, var(--spore-accent) 14%, var(--spore-muted));
  color: var(--spore-accent);
}

.pick__go {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spore-space-2);
}

.people {
  display: grid;
  gap: var(--spore-space-4);
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--spore-space-8) * 9), 1fr));
}

.person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--spore-space-4);
  align-items: center;
  padding: var(--spore-space-4);
  border: 1px solid var(--spore-line);
  border-radius: var(--spore-radius-lg);
  background-color: var(--spore-glass-heavy);
  box-shadow: var(--spore-edge);
}

.person__meta {
  display: flex;
  flex-direction: column;
  gap: var(--spore-space-1);
  min-width: 0;
}

.person__meta p {
  margin: 0;
  color: var(--spore-muted-fg);
  font-size: var(--spore-text-sm);
}

.site-foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spore-space-3) var(--spore-space-5);
  align-items: center;
  margin: var(--spore-space-8) 0 0;
  padding-top: var(--spore-space-5);
  border-top: 1px solid var(--spore-line);
  color: var(--spore-muted-fg);
  font-size: var(--spore-text-sm);
}

.site-foot__legal a {
  color: inherit;
  text-decoration: none;
  min-height: var(--spore-touch);
  display: inline-flex;
  align-items: center;
  border-radius: var(--spore-radius-control);
}

.site-foot__legal a:focus-visible {
  outline: none;
  box-shadow: var(--spore-focus-ring);
}

.grid--three {
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--spore-space-8) * 10), 1fr));
}

.band {
  background-color: color-mix(in srgb, var(--spore-muted) 48%, var(--spore-bg));
}

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--spore-space-4);
  margin: 0;
  padding: var(--spore-space-6);
  border: 1px solid var(--spore-line);
  border-radius: var(--spore-radius-panel);
  background-color: var(--spore-glass-heavy);
  color: var(--spore-surface-fg);
  box-shadow: var(--spore-edge), var(--spore-shadow);
}

.quote p {
  margin: 0;
  font-size: var(--spore-text-lg);
  line-height: var(--spore-leading-snug);
}

.quote footer {
  display: flex;
  align-items: center;
  gap: var(--spore-space-3);
  font-size: var(--spore-text-sm);
  color: var(--spore-muted-fg);
}

.quote__role {
  display: block;
  font-size: var(--spore-text-xs);
}

.logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spore-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--spore-muted-fg);
  font-family: var(--spore-font-label);
  font-size: var(--spore-text-sm);
  font-weight: var(--spore-weight-label);
  letter-spacing: var(--spore-tracking-label);
}

.proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spore-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.proof__item {
  display: inline-flex;
  align-items: center;
  gap: var(--spore-space-2);
  min-height: var(--spore-touch);
  font-size: var(--spore-text-sm);
  color: var(--spore-fg);
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--spore-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
}

.plan li {
  display: flex;
  align-items: flex-start;
  gap: var(--spore-space-2);
  font-size: var(--spore-text-sm);
  line-height: var(--spore-leading-snug);
}

.card--feature {
  border-color: var(--spore-fg);
  box-shadow: var(--spore-edge), var(--spore-shadow-lg);
}

.card > .chip {
  align-self: start;
}

.card > .btn {
  margin-top: auto;
}

.orbit {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  justify-items: center;
  gap: var(--spore-space-5);
  width: 100%;
  max-width: calc(var(--spore-space-8) * 32);
  align-self: center;
  min-height: calc(var(--spore-space-8) * 16);
}

.orbit__mark {
  grid-column: 2;
  grid-row: 2;
  z-index: 1;
  display: grid;
  place-items: center;
  width: calc(var(--spore-space-8) * 3.25);
  height: calc(var(--spore-space-8) * 3.25);
  border-radius: var(--spore-radius-lg);
  background-color: var(--spore-fg);
  color: var(--spore-bg);
  box-shadow: var(--spore-shadow-lg);
}

.orbit__mark span {
  width: 36%;
  height: 36%;
  border-radius: var(--spore-radius-sm);
  background-color: var(--spore-bg);
}

.orbit__node {
  z-index: 1;
  width: 100%;
  max-width: calc(var(--spore-space-8) * 8);
  padding: var(--spore-space-4);
  gap: var(--spore-space-2);
}

.orbit__node--a {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.orbit__node--b {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
}

.orbit__node--c {
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
}

.orbit__node--d {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.orbit__node--e {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
}

.orbit__node--f {
  grid-column: 3;
  grid-row: 3;
  justify-self: end;
}

.orbit__preview {
  display: flex;
  flex-direction: column;
  gap: var(--spore-space-1);
}

.orbit__preview span {
  display: block;
  height: 0.4rem;
  border-radius: var(--spore-radius-pill);
  background-color: var(--spore-muted);
}

.orbit__preview span:first-child {
  width: 72%;
  background-color: var(--spore-fg);
}

.orbit__preview span:nth-child(2) {
  width: 90%;
}

.orbit__preview span:nth-child(3) {
  width: 54%;
}

.orbit__swatch {
  display: flex;
  gap: var(--spore-space-1);
}

.orbit__swatch span {
  width: var(--spore-space-4);
  height: var(--spore-space-4);
  border-radius: var(--spore-radius-sm);
  background-color: var(--spore-muted);
}

.orbit__swatch span:nth-child(1) {
  background-color: var(--spore-fg);
}

.orbit__swatch span:nth-child(2) {
  background-color: var(--spore-accent);
}

.orbit__swatch span:nth-child(3) {
  background-color: var(--spore-success-border);
}

.orbit__swatch span:nth-child(4) {
  background-color: var(--spore-info-border);
}

.site-foot {
  grid-column: 1 / -1;
  grid-row: 4;
  padding: var(--spore-space-8) var(--spore-space-4);
  padding-bottom: calc(var(--spore-space-8) + var(--spore-safe-bottom));
  border-top: 1px solid var(--spore-line);
  background-color: color-mix(in srgb, var(--spore-muted) 48%, var(--spore-bg));
  color: var(--spore-fg);
}

.site-foot__grid {
  display: grid;
  gap: var(--spore-space-8);
  width: 100%;
  max-width: calc(var(--spore-space-8) * 36);
  margin-inline: auto;
}

.site-foot__brand {
  display: flex;
  flex-direction: column;
  gap: var(--spore-space-3);
  max-width: 36ch;
}

.site-foot__brand p {
  margin: 0;
  color: var(--spore-muted-fg);
}

.site-foot__col {
  display: flex;
  flex-direction: column;
  gap: var(--spore-space-2);
}

.site-foot__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--spore-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-foot__col a {
  display: inline-flex;
  align-items: center;
  min-height: var(--spore-touch);
  color: var(--spore-muted-fg);
  text-decoration: none;
  border-radius: var(--spore-radius-control);
}

.site-foot__col a:focus-visible {
  outline: none;
  box-shadow: var(--spore-focus-ring);
}

@media (min-width: 48rem) {
  .site-foot__grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  }

  .split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--spore-space-8);
  }

  .metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .metric {
    border-bottom: 0;
    border-inline-end: 1px solid var(--spore-line);
  }

  .metric:last-child {
    border-inline-end: 0;
  }

  .pick {
    grid-template-columns: auto minmax(0, 1.6fr) auto;
  }
}

@media (max-width: 47.99rem) {
  .orbit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    min-height: 0;
  }

  .orbit__mark {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
  }

  .orbit__node,
  .orbit__node--a,
  .orbit__node--b,
  .orbit__node--c,
  .orbit__node--d,
  .orbit__node--e,
  .orbit__node--f {
    grid-column: auto;
    grid-row: auto;
    justify-self: stretch;
    max-width: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .site-foot__col a:hover,
  .site-foot__legal a:hover {
    color: var(--spore-fg);
  }

  .pick,
  .slot,
  .metric {
    transition:
      border-color var(--spore-duration) var(--spore-ease),
      box-shadow var(--spore-duration) var(--spore-ease),
      transform var(--spore-duration) var(--spore-ease);
  }

  .pick:hover,
  .slot:hover {
    border-color: var(--spore-border);
    box-shadow: var(--spore-edge), var(--spore-shadow-lg);
    transform: translateY(-2px);
  }

  .metric:hover {
    background-color: var(--spore-surface-hover);
  }
}

@media (forced-colors: active) {
  .quote,
  .card--feature,
  .orbit__node,
  .site-foot,
  .metric,
  .board,
  .slot,
  .pick,
  .person,
  .fold {
    border: 1px solid ButtonText;
    background-color: Canvas;
    color: CanvasText;
    box-shadow: none;
  }

  .orbit__mark {
    background-color: CanvasText;
    color: Canvas;
    forced-color-adjust: none;
  }

  .orbit__mark span {
    background-color: Canvas;
  }

  .orbit__preview,
  .orbit__swatch {
    display: none;
  }

  .band {
    background-color: Canvas;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .band,
  .site-foot,
  .pick {
    background-color: var(--spore-muted);
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pick,
  .slot,
  .metric {
    transition: none;
    transform: none;
  }
}