/* The landing page, over site.css. */

/* ---- the replay at the top: the overlay drawn with Pixi on a 1280 × 720 canvas, scaled to the page (replay.js) ---- */

.hero {
  padding: 32px 0 24px;
}
.player {
  margin: 0;
}
.screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
}
.screen canvas,
.screen video {
  display: block;
  width: 100%;
  height: 100%;
}

/* The made-up stream page the replay plays on: a browser window with no name or logo, its parts left as grey shapes,
   in shades like the rest of the site and no outlines. Only the replay and the viewers' chat lines are real. */
.browser {
  overflow: hidden;
  border-radius: 16px;
  background: var(--panel);
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 40px;
  padding: 0 14px;
  background: #222;
}
.browser-dots {
  display: flex;
  gap: 7px;
}
.browser-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3a3a3a;
}
.browser-address {
  flex: 1;
  max-width: 460px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  margin: 0 auto;
  padding: 0 12px;
  border-radius: 999px;
  background: #2c2c2c;
}
.browser-address svg {
  flex: none;
  fill: none;
  stroke: #6b6b6b;
  stroke-width: 2.2;
}
.ghost {
  display: block;
  width: var(--w, 50%);
  height: 8px;
  border-radius: 999px;
  background: #2e2e2e;
}
.ghost.thin {
  height: 6px;
  background: #282828;
}
.browser-address .ghost {
  background: #3a3a3a;
}
.stream-page {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 272px;
}
.stream-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
}
.stream-nav i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #2a2a2a;
}
.stream-main {
  min-width: 0;
  background: #161616;
}
.stream-main .screen {
  border-radius: 0;
}
.stream-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 16px;
}
.stream-avatar {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #2e2e2e;
  box-shadow: 0 0 0 2px #161616, 0 0 0 4px #e8322a;
}
.stream-avatar .live {
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  padding: 0 4px;
  border-radius: 4px;
  background: #e8322a;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.04em;
}
.stream-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.stream-info .ghost.pill {
  flex: none;
  width: 84px;
  height: 30px;
  border-radius: 8px;
}
/* As tall as the player and the channel beside it, however much chat there is. */
.stream-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  contain: size;
  background: #1f1f1f;
}
.chat-head,
.chat-input {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 14px;
}
.chat-head {
  height: 44px;
}
.chat-input {
  height: 52px;
}
.chat-input .ghost {
  height: 30px;
  width: 100%;
  border-radius: 8px;
  background: #2a2a2a;
}
/* The chat fills from the bottom, oldest going off the top. Each line is a name and a message, grey, until a viewer
   asks for the replay: then their name, !replay, and what they gave. */
.chat-lines {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  min-height: 0;
  margin: 0;
  padding: 0 14px 6px;
  overflow: hidden;
  list-style: none;
  font-size: 13px;
  line-height: 18px;
}
.chat-lines li {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.chat-lines .ghost {
  height: 7px;
}
.chat-lines .ghost.name {
  width: var(--w);
  background: #363636;
}
.chat-name {
  font-weight: 600;
}
.chat-gave {
  padding: 0 7px;
  border-radius: 999px;
  background: #2e2e2e;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.chat-note {
  color: var(--muted);
}
@media (prefers-reduced-motion: no-preference) {
  .chat-lines li.new {
    animation: chat-in 0.3s ease-out;
  }
  @keyframes chat-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
  }
}
@media (max-width: 1000px) {
  .stream-page {
    grid-template-columns: minmax(0, 1fr) 240px;
  }
  .stream-nav {
    display: none;
  }
}
@media (max-width: 760px) {
  .stream-page {
    grid-template-columns: minmax(0, 1fr);
  }
  .stream-chat {
    display: none;
  }
  .browser {
    border-radius: 12px;
  }
  .browser-bar {
    height: 32px;
    gap: 12px;
  }
  .stream-info {
    padding: 10px 12px 12px;
  }
  .stream-avatar {
    width: 34px;
    height: 34px;
  }
}

/* Under the replay: its size, replay style and sting, each a pill of choices with a small title over it, on one line. */
.demo-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 14px;
  margin-top: 14px;
}
.control {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.control-label {
  padding-left: 12px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.control-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.seg {
  flex: none;
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  background: var(--panel);
}
.seg button {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.seg button:hover {
  color: var(--text);
}
.seg button[aria-pressed='true'] {
  background: var(--accent);
  color: var(--on-accent);
}
.control .more {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* ---- the rest of the page ---- */

.hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.hero-title {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero h1 {
  max-width: 20ch;
  font-size: clamp(34px, 6vw, 68px);
  letter-spacing: -0.045em;
  line-height: 1.02;
  text-wrap: balance;
}
.hero-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 640px;
}
.lead {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.fine {
  color: var(--muted);
  font-size: 13px;
}
.fine.center {
  margin-top: 20px;
  text-align: center;
}
@media (max-width: 860px) {
  .hero-copy {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 32px;
  }
}
@media (max-width: 600px) {
  .hero {
    padding-top: 16px;
  }
  .control-row {
    flex-wrap: wrap;
  }
  .lead {
    font-size: 16px;
  }
  .actions .button {
    flex: 1 1 100%;
  }
}

.section {
  padding: 96px 0 0;
  scroll-margin-top: 48px;
}
@media (max-width: 600px) {
  .section {
    padding-top: 72px;
  }
}
.section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
  margin-bottom: 36px;
}
.section-head h2 {
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.narrow {
  max-width: calc(800px + 2 * var(--gutter));
}

/* What it does: a row per feature, a screenshot beside its words, alternating sides, coming in as they scroll in. */
.section-label {
  margin-bottom: 36px;
}
.features {
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 24px 56px;
  align-items: center;
}
.feature:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
}
.feature:nth-child(even) .shot {
  order: 2;
}
.feature-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 440px;
}
.feature-copy h3 {
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.03em;
}
.feature-copy p {
  color: var(--muted);
  font-size: 17px;
}
/* A screenshot's frame: 16:10 for the app's window, 16:9 for what's on stream. */
.shot {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 14px;
  background: var(--panel);
}
.shot.stream {
  aspect-ratio: 16 / 9;
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The app's window, the same shade as the page, rising from a panel. */
.shot.window {
  padding: 20px 20px 0;
}
.shot.window img {
  height: auto;
  border-radius: 10px 10px 0 0;
}
/* Two screenshots overlapping: the game with a Mini replay in its corner behind, a full-screen replay in front. */
.shot.shot-stack {
  overflow: visible;
  background: none;
}
.shot-stack > div {
  position: absolute;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: var(--panel);
}
.shot-stack .card-mini {
  left: 0;
  top: 0;
  width: 82%;
}
.shot-stack .card-full {
  right: 0;
  bottom: 0;
  width: 50%;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
}
/* The app's window behind, at its own 16:10, with an on-stream picture in front. */
.shot-stack .card-window {
  aspect-ratio: 16 / 10;
}
@media (max-width: 760px) {
  .features {
    gap: 48px;
  }
  .feature,
  .feature:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
  }
  .feature:nth-child(even) .shot {
    order: 0;
  }
  .feature-copy p {
    font-size: 16px;
  }
}
/* Coming in: the screenshot rises and settles, the words follow it. Shown at once without script, and only fading
   with less motion. */
.js .reveal .shot,
.js .reveal .feature-copy {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js .reveal .shot {
  transform: translateY(32px) scale(0.97);
}
.js .reveal .feature-copy {
  transition-delay: 0.12s;
}
.js .reveal.in .shot,
.js .reveal.in .feature-copy {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal .shot,
  .js .reveal .feature-copy {
    transform: none;
    transition: opacity 0.3s ease;
  }
}
.steps h3,
.band h3 {
  font-size: 17px;
  letter-spacing: -0.01em;
}
.steps p,
.band p {
  color: var(--muted);
  font-size: 15px;
}
code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--control);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.88em;
}

.band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 48px;
  margin-top: 88px;
  padding: 28px;
  border-radius: 14px;
  background: var(--panel);
}
.band > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 760px) {
  .band {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px;
  }
}

/* How it works: three steps on a dotted arrow. Once they're in view a lime dot runs along it and lights each step in
   turn, every 6 s; with less motion it all stays still. Across on wide screens, down on narrow ones. */
.steps {
  --icon: 56px;
  --gap: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.step-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--icon);
  height: var(--icon);
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--muted);
}
.steps .num {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
}
/* The dotted arrow to the next step, from just after this icon to just before the next. */
.steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(var(--icon) / 2 - 5px);
  left: calc(var(--icon) + 10px);
  width: calc(100% + var(--gap) - var(--icon) - 20px);
  height: 10px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23737373' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 1 4 4-4 4'/%3E%3C/svg%3E") right center / 10px 10px no-repeat,
    repeating-linear-gradient(90deg, #4a4a4a 0 4px, transparent 4px 10px) left center / calc(100% - 12px) 2px no-repeat;
}
/* The dot that runs along it. */
.steps li:not(:last-child)::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: calc(var(--icon) / 2 - 4px);
  left: calc(var(--icon) + 10px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .steps.in .step-icon {
    animation: step-on 6s infinite;
  }
  .steps.in li:nth-child(2) .step-icon {
    animation-delay: 2.4s;
  }
  .steps.in li:nth-child(3) .step-icon {
    animation-delay: 4.8s;
  }
  .steps.in li:not(:last-child)::before {
    animation: step-run 6s 0.6s infinite;
  }
  .steps.in li:nth-child(2)::before {
    animation-delay: 3s;
  }
  .steps.in li:not(:last-child)::after {
    animation: step-march 0.9s linear infinite;
  }
}
/* A step lights up as the dot reaches it (the first one as each round starts), then settles. */
@keyframes step-on {
  0%,
  12% {
    background: #1a1d0c;
    color: var(--accent);
    box-shadow: 0 0 0 6px rgba(223, 242, 74, 0.12);
  }
  24%,
  100% {
    background: var(--panel);
    color: var(--muted);
    box-shadow: 0 0 0 0 rgba(223, 242, 74, 0);
  }
}
@keyframes step-run {
  0% {
    left: calc(var(--icon) + 10px);
    opacity: 1;
  }
  30% {
    left: calc(100% + var(--gap) - 26px);
    opacity: 1;
  }
  31%,
  100% {
    left: calc(100% + var(--gap) - 26px);
    opacity: 0;
  }
}
@keyframes step-march {
  from {
    background-position: right center, 0 center;
  }
  to {
    background-position: right center, 10px center;
  }
}
/* Narrow screens: the steps stacked, each icon beside its words, the arrow running down between the icons. */
@media (max-width: 760px) {
  .steps {
    --gap: 32px;
    grid-template-columns: minmax(0, 1fr);
  }
  .steps li {
    display: grid;
    grid-template-columns: var(--icon) minmax(0, 1fr);
    align-content: start;
    column-gap: 18px;
    row-gap: 6px;
  }
  .step-icon {
    grid-row: 1 / span 3;
    margin-bottom: 0;
  }
  .steps .num,
  .steps h3,
  .steps p {
    grid-column: 2;
  }
  .steps li:not(:last-child)::after {
    top: calc(var(--icon) + 10px);
    left: calc(var(--icon) / 2 - 5px);
    width: 10px;
    height: calc(100% + var(--gap) - var(--icon) - 20px);
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23737373' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 3 4 4 4-4'/%3E%3C/svg%3E") center bottom / 10px 10px no-repeat,
      repeating-linear-gradient(180deg, #4a4a4a 0 4px, transparent 4px 10px) center top / 2px calc(100% - 12px) no-repeat;
  }
  .steps li:not(:last-child)::before {
    top: calc(var(--icon) + 10px);
    left: calc(var(--icon) / 2 - 4px);
  }
  @media (prefers-reduced-motion: no-preference) {
    .steps.in li:not(:last-child)::before {
      animation-name: step-run-down;
    }
    .steps.in li:not(:last-child)::after {
      animation-name: step-march-down;
    }
  }
}
@keyframes step-run-down {
  0% {
    top: calc(var(--icon) + 10px);
    opacity: 1;
  }
  30% {
    top: calc(100% + var(--gap) - 26px);
    opacity: 1;
  }
  31%,
  100% {
    top: calc(100% + var(--gap) - 26px);
    opacity: 0;
  }
}
@keyframes step-march-down {
  from {
    background-position: center bottom, center 0;
  }
  to {
    background-position: center bottom, center 10px;
  }
}
.key {
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 0.92em;
  font-weight: 600;
  white-space: nowrap;
}
.key.mark {
  background: var(--mark);
  color: #0a0a0a;
}

/* Games: big and left-aligned, "Auto clip on" and a game's name, which the next one pushes up out of sight (games.js),
   then "Manual clip on any game" in grey. Every game folds away under a pill. */
.games-line {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  font-size: clamp(30px, 6.4vw, 76px);
  letter-spacing: -0.045em;
  line-height: 1.04;
}
/* games.js shrinks a long name to fit, so the line can stay on one. */
.js .games-line .auto {
  white-space: nowrap;
}
/* Clips only above and below, a little lower for descenders, so a longer name on its way out isn't cut at the side. */
.games-line .mask {
  position: relative;
  display: inline-block;
  clip-path: inset(0 -100vmax -0.16em 0);
}
.games-line .name {
  display: inline-block;
  color: var(--accent);
  white-space: nowrap;
}
.games-line .name.leaving {
  position: absolute;
  left: 0;
}
.games-line .manual {
  margin-top: 0.12em;
  color: #6f6f6f;
  text-wrap: balance;
}

.all-games {
  margin-top: 32px;
}
.all-games summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.all-games summary::-webkit-details-marker {
  display: none;
}
.all-games summary::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.all-games[open] summary::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}
.all-games summary:hover {
  background: var(--control);
}
.games {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 900px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.games li {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--panel);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

/* Monthly or yearly: the switch shows Pro's price for the one picked; without script both prices show and it hides. */
/* Over the Pro card, right-aligned: the grid's first row, Pro's column. Stacked, it comes between Free and Pro. */
.billing {
  display: none;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}
.plans > .plan {
  grid-row: 2;
}
.plans > .plan.pro {
  grid-column: 2;
}
@media (max-width: 760px) {
  .billing {
    grid-column: 1;
    grid-row: 2;
  }
  .plans > .plan {
    grid-row: 1;
  }
  .plans > .plan.pro {
    grid-column: 1;
    grid-row: 3;
  }
}
.js .billing {
  display: inline-flex;
}
.billing .save {
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(223, 242, 74, 0.14);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
}
.billing button[aria-pressed='true'] .save {
  background: rgba(10, 10, 10, 0.14);
  color: var(--on-accent);
}
.price-option {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* What a yearly plan actually charges, right under its monthly figure and in the text colour, not tucked away. */
.price-option .billed {
  color: var(--text);
  font-weight: 500;
}
.js .plans[data-billing='yearly'] .price-option.monthly,
.js .plans[data-billing='monthly'] .price-option.yearly {
  display: none;
}
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 760px) {
  .plans {
    grid-template-columns: minmax(0, 1fr);
  }
}
.plan {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 26px;
  border-radius: 14px;
  background: var(--panel);
}
.plan.pro {
  background: var(--control);
}
.plan-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan h3 {
  font-size: 15px;
}
.price {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.price .todo {
  font-size: 22px;
  vertical-align: middle;
}
/* "US" small before the $, on the same baseline, so the number carries the price. */
.price .cur {
  margin-right: 0.02em;
  color: var(--text);
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0;
}
.price .per {
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
}
.muted {
  color: var(--muted);
}
.ticks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ticks li {
  position: relative;
  padding-left: 28px;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 5px;
  width: 14px;
  height: 14px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq details {
  padding: 0 20px;
  border-radius: 12px;
  background: var(--panel);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 12px 0;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  flex: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 20px;
}
.faq details[open] summary::after {
  content: '–';
}
.faq details p {
  max-width: 680px;
  padding: 0 0 20px;
  color: var(--muted);
}

.get {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px 56px;
  align-items: center;
  padding: 40px;
  border-radius: 18px;
  background: var(--panel);
}
.get-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.get h2 {
  font-size: clamp(32px, 4vw, 44px);
  letter-spacing: -0.04em;
}
.get .button.soon,
.get .button.soon:hover {
  background: var(--control);
}
.community {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px;
  border-radius: 14px;
  background: var(--control);
}
.community .icon {
  color: var(--accent);
}
.community h3 {
  font-size: 19px;
  letter-spacing: -0.02em;
}
.community p {
  margin-bottom: 6px;
  color: var(--muted);
}
@media (max-width: 860px) {
  .get {
    grid-template-columns: minmax(0, 1fr);
    padding: 28px 22px;
  }
}
@media (max-width: 600px) {
  .community {
    padding: 20px;
  }
  .community .button {
    width: 100%;
  }
}