/* =========================================================================
   PG-2 / Abitat — landing page components
   Built on the ORYZO design system (tokens.css). Structural patterns mirror
   the orchid-replica capture: page-container, section-wrapper, floating nav
   pill, mono technical labels, rounded card surfaces.
   ========================================================================= */

/* ----- reset ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

body {
  font-family: var(--font-suisse-intl);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-carbon-black);
  background: #151515;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
section[id] { scroll-margin-top: 88px; }

/* ----- layout primitives (mirrors orchid .page-container / .section-wrapper) ----- */
.page-container {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 768px)  { .page-container { padding-inline: 24px; } }
@media (min-width: 1280px) { .page-container { padding-inline: 24px; } }

.section {
  padding-block: 56px;
}
@media (min-width: 1024px) { .section { padding-block: 96px; } }

.section-title {
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: var(--font-weight-medium);
  text-align: center;
  margin-bottom: 32px;
}
@media (min-width: 768px) { .section-title { font-size: 41px; } }

/* mono technical eyebrow/label */
.mono-label {
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ash);
}

/* ----- buttons / pills ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding-inline: 20px;
  border-radius: var(--radius-buttons);
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-body-sm);
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform .15s ease, background-color .2s ease, color .2s ease;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--color-solder-orange); color: var(--color-signal-white); }
.btn--primary:hover { background: #ff5a14; }
.btn--dark { background: var(--color-deep-charcoal); color: var(--color-signal-white); }
.btn--dark:hover { background: #000; }
.btn--ghost { background: rgba(255,255,255,0.7); color: var(--color-carbon-black); border: 1px solid rgba(0,0,0,0.12); backdrop-filter: blur(8px); }
.btn--ghost:hover { background: #fff; }
/* transparent white-outline button used over the hero photo */
.btn--ghost-light { background: transparent; color: var(--color-signal-white); border: 1px solid var(--color-signal-white); height: 44px; padding-inline: 24px; font-size: var(--text-body-sm); }
.btn--ghost-light:hover { background: var(--color-signal-white); color: var(--color-carbon-black); }

/* tag chip */
.tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding-inline: 10px;
  border-radius: var(--radius-tags);
  background: var(--color-carbon-black);
  color: var(--color-signal-white);
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
}

/* =========================================================================
   Announcement bar — scrolling marquee
   ========================================================================= */
.announcement {
  background: var(--color-deep-charcoal);
  color: var(--color-signal-white);
  height: 38px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}
.marquee {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee span {
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  padding-inline: 28px;
  opacity: 0.92;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =========================================================================
   Nav — floating sticky bar
   ========================================================================= */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 8px 16px 16px;
  margin-bottom: -120px;
  background: transparent;
}
.nav {
  max-width: 1392px;
  margin-inline: auto;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding-inline: 16px;
  border-radius: var(--radius-navpill);
  background: var(--color-deep-charcoal);
  color: var(--color-signal-white);
}
.nav__logo { display: flex; align-items: center; gap: 10px; font-weight: var(--font-weight-medium); font-size: var(--text-subheading); }
.nav__logo-mark {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  object-fit: cover;
}
.nav__links { display: none; gap: 20px; }
.nav__links a {
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-body-sm);
  color: rgba(255,255,255,0.72);
  transition: color .2s ease;
}
.nav__links a:hover { color: #fff; }
.nav__spacer { flex: 1; }
.nav .btn { height: 34px; padding-inline: 16px; font-size: var(--text-caption); }
@media (max-width: 899px) {
  .nav-wrap {
    margin-top: -16px;
    margin-bottom: -104px;
  }
}
@media (min-width: 900px) { .nav__links { display: flex; } }

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  position: relative;
  width: 100%;
  /* The hero begins 4px above the document origin because the floating nav
     overlaps it. Add that overlap back so the next section starts exactly
     below the first viewport on every screen size. */
  min-height: calc(100vh + 4px);
  height: calc(100vh + 4px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  margin-top: -16px;
  padding-top: 120px;
}
@supports (height: 100svh) {
  .hero { min-height: calc(100svh + 4px); }
}
@supports (height: 100dvh) {
  .hero { height: calc(100dvh + 4px); }
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero__scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 660px;
  padding: 0 24px 56px;
}
@media (min-width: 768px) { .hero__copy { padding: 0 64px 120px; } }
.hero__copy .tag { background: var(--color-signal-white); color: var(--color-carbon-black); border-radius: 6px; height: auto; padding: 5px 10px; font-family: var(--font-suisse-intl); font-weight: var(--font-weight-medium); font-size: var(--text-body-sm); }
.hero__title {
  font-size: clamp(32px, 5vw, 44px);
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: var(--font-weight-medium);
  color: var(--color-signal-white);
  max-width: 620px;
}
.hero__sub {
  font-size: var(--text-body);
  line-height: 1.33;
  color: var(--color-signal-white);
  max-width: 480px;
}

/* =========================================================================
   Structural content slots — Custom Play and Sound
   ========================================================================= */
.section-intro {
  max-width: 920px;
  margin-bottom: 48px;
}
.section-intro__eyebrow {
  display: block;
  margin-bottom: 22px;
  color: var(--color-solder-orange);
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.section-intro h2 {
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: .96;
  letter-spacing: -.05em;
  font-weight: var(--font-weight-medium);
}
.section-intro p {
  max-width: 540px;
  color: rgba(255,255,255,.58);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.5;
}
.section-intro--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr);
  align-items: end;
  gap: 20px 64px;
}
.section-intro--split .section-intro__eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
.content-slot {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 45%),
    #090a0b;
}
.content-slot > span {
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: rgba(255,255,255,.48);
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.content-slot--video {
  aspect-ratio: 4 / 3;
}
.play-modes {
  padding: 112px 16px 120px;
  background: #101113;
  color: var(--color-signal-white);
}
.play-modes__inner {
  max-width: 1392px;
  margin-inline: auto;
}
.play-modes__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.play-modes .content-slot--video {
  aspect-ratio: 1920 / 1044;
}
.content-slot--demo-video {
  position: relative;
  isolation: isolate;
}
.content-slot--custom-video {
  background:
    linear-gradient(rgba(5,5,6,.18), rgba(5,5,6,.28)),
    url("../img/custom-chord-set-beethoven-op109-poster.webp?v=optimized") center / cover no-repeat;
}
.content-slot--midi-video {
  background:
    linear-gradient(rgba(5,5,6,.1), rgba(5,5,6,.18)),
    url("../img/pocket-guitar-midi-controller-demo-poster.webp?v=optimized") center / cover no-repeat;
}
.content-slot--demo-video::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -32px;
  background: inherit;
  filter: blur(28px);
  opacity: .5;
}
.content-slot--demo-video video {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  opacity: 0;
  cursor: pointer;
  transition: opacity 180ms ease;
}
.content-slot--demo-video.has-started video { opacity: 1; }
.content-slot--midi-video::before {
  display: none;
}
.content-slot--midi-video video {
  object-fit: cover;
  object-position: center;
}
.media-play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  width: 58px;
  height: 58px;
  padding: 0;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: rgba(5,5,6,.66);
  color: var(--color-signal-white);
  box-shadow: 0 12px 36px rgba(0,0,0,.38);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: opacity 180ms ease, transform 180ms ease, background-color 180ms ease;
}
.media-play svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.media-play:hover {
  transform: translate(-50%, -50%) scale(1.06);
  background: rgba(5,5,6,.82);
}
.media-play:focus-visible {
  outline: 3px solid var(--color-solder-orange);
  outline-offset: 4px;
}
.media-fullscreen {
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 12px;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 50%;
  background: rgba(5,5,6,.62);
  color: var(--color-signal-white);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease;
}
.media-fullscreen svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.media-fullscreen:hover {
  transform: scale(1.06);
  background: rgba(5,5,6,.82);
}
.media-fullscreen:focus-visible {
  outline: 3px solid var(--color-solder-orange);
  outline-offset: 3px;
}
.content-slot--demo-video.is-playing .media-play {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.content-slot--demo-video.is-buffering .media-play {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.media-loading {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border: 3px solid rgba(255,255,255,.28);
  border-top-color: var(--color-signal-white);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.42));
}
.content-slot--demo-video.is-buffering .media-loading {
  opacity: 1;
  visibility: visible;
  animation: media-loading-spin 760ms linear infinite;
}
.media-loading__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@keyframes media-loading-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .media-play,
  .media-fullscreen,
  .content-slot--demo-video video {
    transition: none;
  }
  .content-slot--demo-video.is-buffering .media-loading {
    animation-duration: 1.4s;
  }
}
.content-slot--demo-video:fullscreen,
.content-slot--demo-video:-webkit-full-screen,
.content-slot--demo-video.is-fullscreen-fallback {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: #050506;
}
.content-slot--demo-video.is-fullscreen-fallback {
  position: fixed;
  z-index: 2000;
  inset: 0;
}
body.video-fullscreen-open {
  overflow: hidden;
}
.play-mode {
  min-width: 0;
}
.play-mode__caption {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 16px;
  padding: 24px 8px 0;
}
.play-mode__caption--single {
  grid-template-columns: minmax(0, 1fr);
}
.play-mode__caption > span {
  color: var(--color-solder-orange);
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
}
.play-mode__caption h3 {
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.1;
  font-weight: var(--font-weight-medium);
}
.play-mode__caption p {
  margin-top: 8px;
  color: rgba(255,255,255,.48);
  font-size: var(--text-body-sm);
  line-height: 1.45;
}
@media (max-width: 700px) {
  .section-intro {
    margin-bottom: 32px;
  }
  .section-intro__eyebrow {
    margin-bottom: 18px;
    font-size: 12px;
  }
  .section-intro h2 {
    font-size: 38px;
  }
  .section-intro--split {
    display: block;
  }
  .section-intro--split h2 {
    margin-top: 18px;
  }
  .section-intro--split p {
    margin-top: 18px;
  }
  .content-slot {
    border-radius: 20px;
  }
  .play-modes .content-slot--video {
    aspect-ratio: 1920 / 1044;
  }
  .media-play {
    width: 52px;
    height: 52px;
  }
  .play-modes {
    padding: 72px 12px 80px;
  }
  .play-modes__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .play-mode__caption {
    padding-top: 18px;
  }
}

/* =========================================================================
   Appearance — aluminum frame and glass back
   ========================================================================= */
.appearance {
  padding: 80px 16px 20px;
  background: #151515;
  color: var(--color-signal-white);
}
.appearance__inner {
  max-width: 1392px;
  margin-inline: auto;
}
.appearance__copy {
  margin-bottom: 32px;
}
.appearance__copy h2 {
  font-size: clamp(38px, 5vw, 64px);
  line-height: .96;
  letter-spacing: -.045em;
  font-weight: var(--font-weight-medium);
}
.appearance__visual {
  position: relative;
  height: clamp(560px, 62vw, 760px);
  overflow: hidden;
  border-radius: 28px;
  background: #171717;
}
.appearance__image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}
.appearance__image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.08);
}
.appearance__materials {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: min(430px, calc(100% - 48px));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px;
  background: rgba(14,14,14,.88);
  backdrop-filter: blur(16px);
  color: var(--color-signal-white);
}
.appearance__material {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  padding: 22px 24px;
}
.appearance__material + .appearance__material {
  border-top: 1px solid rgba(255,255,255,.14);
}
.appearance__material > span {
  color: var(--color-solder-orange);
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  letter-spacing: .06em;
}
.appearance__material h3 {
  font-size: var(--text-subheading);
  line-height: 1.2;
  font-weight: var(--font-weight-medium);
}
.appearance__material p {
  margin-top: 5px;
  color: rgba(255,255,255,.58);
  font-size: var(--text-body-sm);
  line-height: 1.35;
}
@media (max-width: 700px) {
  .appearance { padding: 56px 12px 12px; }
  .appearance__copy {
    margin-bottom: 24px;
  }
  .appearance__copy h2 { font-size: 32px; }
  .appearance__visual {
    height: auto;
    border-radius: 20px;
  }
  .appearance__image {
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .appearance__materials {
    position: static;
    width: 100%;
    border: 0;
    border-radius: 0;
    background: #151515;
    backdrop-filter: none;
  }
  .appearance__material {
    grid-template-columns: 28px 1fr;
    gap: 12px;
    padding: 18px 20px;
  }
}

/* =========================================================================
   Animated chord demonstration
   ========================================================================= */
.chord-demo {
  width: 100%;
  overflow: hidden;
  padding: 88px 16px 96px;
  background: #151515;
  color: var(--color-signal-white);
}
.chord-demo__copy {
  max-width: 1392px;
  margin: 0 auto 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  align-items: end;
  gap: 24px 64px;
}
.chord-demo__eyebrow {
  grid-column: 1 / -1;
  color: var(--color-solder-orange);
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.chord-demo__copy h2 {
  max-width: 880px;
  font-size: clamp(30px, 3.5vw, 46px);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: var(--font-weight-medium);
}
.chord-demo__copy p {
  max-width: 470px;
  color: rgba(255,255,255,.7);
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.4;
}
.chord-demo__frame {
  width: min(100%, 1392px);
  margin-inline: auto;
  padding: clamp(20px, 3vw, 44px);
  border: 1px solid #2e3033;
  border-radius: 36px;
  background: #050506;
  box-shadow: 0 30px 70px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.035);
}
.chord-demo__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  background: #000;
}
.chord-demo__device {
  position: absolute;
  inset: 0;
  transform: scale(1.2);
}
.chord-demo__device > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.chord-demo__customize {
  max-width: 720px;
  margin: 44px auto 0;
  color: rgba(255,255,255,.78);
  font-size: clamp(19px, 2vw, 28px);
  line-height: 1.35;
  letter-spacing: -.015em;
  text-align: center;
}
.chord-demo__tags {
  max-width: 1392px;
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.chord-demo__tags > div {
  min-height: 142px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.chord-demo__tags > div:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,.2);
}
.chord-demo__tags strong {
  font-size: clamp(38px, 4.5vw, 58px);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: var(--font-weight-medium);
}
.chord-demo__tags span {
  color: rgba(255,255,255,.62);
  font-size: clamp(13px, 1.4vw, 18px);
  line-height: 1.25;
}
.chord-demo__joystick-base,
.chord-demo__joystick {
  position: absolute;
  left: 29.25%;
  top: 63.25%;
  z-index: 2;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.chord-demo__joystick-base {
  width: 5.1%;
  aspect-ratio: 1;
  background: radial-gradient(circle, #1a1b1d 0 43%, #313236 44% 63%, #17181a 64%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.chord-demo__joystick {
  width: 3.5%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 38% 32%, #fff 0, #f3f3f3 44%, #b9b9b9 74%, #747474 100%);
  box-shadow: 0 3px 12px rgba(255,255,255,.22), 0 8px 16px rgba(0,0,0,.7);
  animation: chord-demo-joystick 16s cubic-bezier(.65,0,.35,1) infinite;
}
.chord-demo__screen {
  position: absolute;
  left: 29.55%;
  top: 35%;
  z-index: 2;
  transform: translate(-50%, -50%);
  color: var(--color-signal-white);
  font-family: var(--font-suisse-intl-mono);
  font-size: clamp(28px, 6vw, 88px);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-shadow: 0 0 18px rgba(255,255,255,.4);
  opacity: 0;
}
.chord-demo__screen--c { animation: chord-demo-screen-c 16s ease infinite; }
.chord-demo__screen--em { animation: chord-demo-screen-em 16s ease infinite; }
.chord-demo__screen--g { animation: chord-demo-screen-g 16s ease infinite; }
.chord-demo__screen--bdim {
  font-size: clamp(18px, 4vw, 60px);
  animation: chord-demo-screen-bdim 16s ease infinite;
}
.chord-demo__notes {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.chord-demo__notes span {
  position: absolute;
  left: 82.4%;
  transform: translate(-50%, -50%) translateX(-10px);
  color: var(--color-signal-white);
  font-family: var(--font-suisse-intl-mono);
  font-size: clamp(12px, 2vw, 28px);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-shadow: 0 0 12px rgba(255,255,255,.5);
  opacity: 0;
}
.chord-demo__notes--c span { animation: chord-demo-note-c 16s ease infinite; }
.chord-demo__notes--em span { animation: chord-demo-note-em 16s ease infinite; }
.chord-demo__notes--g span { animation: chord-demo-note-g 16s ease infinite; }
.chord-demo__notes--bdim span { animation: chord-demo-note-bdim 16s ease infinite; }
.chord-demo__notes span:nth-child(1) { top: 26%; }
.chord-demo__notes span:nth-child(2) { top: 34.75%; animation-delay: .1s; }
.chord-demo__notes span:nth-child(3) { top: 43.5%; animation-delay: .2s; }
.chord-demo__notes span:nth-child(4) { top: 52.2%; animation-delay: .3s; }
.chord-demo__notes span:nth-child(5) { top: 61.1%; animation-delay: .4s; }
.chord-demo__notes span:nth-child(6) { top: 69.9%; animation-delay: .5s; }
@keyframes chord-demo-joystick {
  0%, 5%, 24%, 26%, 45%, 47%, 66%, 68%, 87%, 100% { transform: translate(-50%, -50%); }
  10%, 20% { transform: translate(-50%, -50%) translateY(-42%); }
  31%, 41% { transform: translate(-50%, -50%) translateX(48%); }
  52%, 62% { transform: translate(-50%, -50%) translateY(42%); }
  73%, 83% { transform: translate(-50%, -50%) translateX(-48%); }
}
@keyframes chord-demo-screen-c {
  0%, 7%, 23%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
  11%, 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes chord-demo-screen-em {
  0%, 28%, 44%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
  32%, 41% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes chord-demo-screen-g {
  0%, 49%, 65%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
  53%, 62% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes chord-demo-screen-bdim {
  0%, 70%, 86%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
  74%, 83% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes chord-demo-note-c {
  0%, 9%, 22%, 100% { opacity: 0; transform: translate(-50%, -50%) translateX(-10px); }
  13%, 19% { opacity: 1; transform: translate(-50%, -50%) translateX(0); }
}
@keyframes chord-demo-note-em {
  0%, 30%, 43%, 100% { opacity: 0; transform: translate(-50%, -50%) translateX(-10px); }
  34%, 40% { opacity: 1; transform: translate(-50%, -50%) translateX(0); }
}
@keyframes chord-demo-note-g {
  0%, 51%, 64%, 100% { opacity: 0; transform: translate(-50%, -50%) translateX(-10px); }
  55%, 61% { opacity: 1; transform: translate(-50%, -50%) translateX(0); }
}
@keyframes chord-demo-note-bdim {
  0%, 72%, 85%, 100% { opacity: 0; transform: translate(-50%, -50%) translateX(-10px); }
  76%, 82% { opacity: 1; transform: translate(-50%, -50%) translateX(0); }
}
@media (max-width: 700px) {
  .chord-demo { padding: 64px 12px 76px; }
  .chord-demo__copy {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 40px;
  }
  .chord-demo__copy h2 {
    max-width: 360px;
    font-size: 32px;
  }
  .chord-demo__eyebrow {
    font-size: 12px;
  }
  .chord-demo__copy p {
    max-width: 350px;
    font-size: var(--text-body);
  }
  .chord-demo__frame {
    padding: 14px;
    border-radius: 24px;
  }
  .chord-demo__customize {
    max-width: 330px;
    margin-top: 28px;
    font-size: var(--text-body);
  }
  .chord-demo__tags {
    margin-top: 22px;
  }
  .chord-demo__tags > div {
    min-height: 112px;
    gap: 7px;
    padding-inline: 8px;
  }
  .chord-demo__tags strong {
    font-size: 36px;
  }
  .chord-demo__tags span {
    max-width: 110px;
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chord-demo__joystick {
    animation: none;
    transform: translate(-50%, -50%) translateY(-42%);
  }
  .chord-demo__screen,
  .chord-demo__notes span {
    animation: none;
    opacity: 0;
  }
  .chord-demo__screen--c,
  .chord-demo__notes--c span {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* =========================================================================
   Portable — pocket-sized hardware and connectivity
   ========================================================================= */
.portable {
  padding: 112px 16px 120px;
  overflow: hidden;
  background: #0c0d0f;
  color: var(--color-signal-white);
}
.portable__inner {
  max-width: 1216px;
  margin-inline: auto;
}
.portable__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
  align-items: stretch;
  gap: clamp(40px, 6vw, 88px);
}
.portable__content {
  padding-block: 28px;
}
.portable__copy {
  max-width: 690px;
}
.portable__eyebrow {
  display: block;
  margin-bottom: 26px;
  color: var(--color-solder-orange);
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.portable__copy h2 {
  font-size: clamp(44px, 5.4vw, 72px);
  line-height: .98;
  letter-spacing: -.05em;
  font-weight: var(--font-weight-medium);
}
.portable__copy p {
  max-width: 660px;
  margin-top: 30px;
  color: rgba(255,255,255,.58);
  font-size: clamp(18px, 1.65vw, 23px);
  line-height: 1.55;
}
.portable__visual {
  align-self: center;
  min-height: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 30px;
  background: #17181a;
}
.portable__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% center;
}
.portable__features {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 42px;
}
.portable__features p {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  color: rgba(255,255,255,.5);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.45;
}
.portable__feature-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--color-solder-orange);
}
.portable__feature-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.portable__features strong {
  color: var(--color-signal-white);
  font-weight: var(--font-weight-medium);
}
.portable__sounds {
  margin-top: 18px;
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: 24px;
  scroll-margin-top: 88px;
}
.chord-demo__sounds {
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  margin: 24px auto 0;
  padding-inline: 16px;
}
.chord-demo__sounds .portable__sounds-label::after {
  content: none;
}
.chord-demo__sounds .portable__sound-options {
  gap: 10px;
}
.chord-demo__sounds .portable__sound-options button {
  min-height: 46px;
  padding-inline: 13px;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}
.chord-demo__sounds .portable__sound-instrument {
  width: 16px;
  height: 16px;
}
.portable__sound-play {
  width: 20px;
  height: 20px;
  margin-left: 2px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-solder-orange);
  color: #0c0d0f;
}
.portable__sound-options .portable__sound-play svg {
  width: 8px;
  height: 8px;
  margin-left: 1px;
  fill: currentColor;
  stroke: none;
}
.portable__sound-options button.is-playing .portable__sound-play {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.portable__sound-options button.is-playing .portable__sound-play svg {
  display: none;
}
.portable__sound-options button.is-playing .portable__sound-play::before,
.portable__sound-options button.is-playing .portable__sound-play::after {
  content: "";
  width: 2px;
  height: 8px;
  display: block;
  border-radius: 1px;
  background: currentColor;
}
.chord-demo__sounds .portable__sound-options button:not(:disabled):hover,
.chord-demo__sounds .portable__sound-options button.is-playing {
  border-color: rgba(255,108,47,.72);
  background: rgba(255,108,47,.1);
}
.portable__sounds-label {
  flex: 0 0 auto;
  color: var(--color-solder-orange);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
}
.portable__sounds-label::after {
  content: "→";
  margin-left: 7px;
}
.portable__sound-options {
  display: flex;
  align-items: center;
  gap: 20px;
}
.portable__sound-options button {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.9);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  transition: color 180ms ease, transform 180ms ease;
}
.portable__sound-options button:disabled {
  opacity: 1;
  cursor: default;
}
.portable__sound-options button:not(:disabled) {
  cursor: pointer;
}
.portable__sound-options button:not(:disabled):hover,
.portable__sound-options button.is-playing {
  color: var(--color-solder-orange);
  transform: translateY(-2px);
}
.portable__sound-options button:focus-visible {
  outline: 3px solid var(--color-solder-orange);
  outline-offset: 5px;
}
.portable__sound-options svg {
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--color-solder-orange);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 900px) {
  .portable {
    padding: 72px 12px 80px;
  }
  .portable__layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .portable__content {
    padding-block: 0;
  }
  .portable__visual {
    min-height: 0;
  }
}
@media (max-width: 560px) {
  .portable__copy h2 {
    font-size: 38px;
  }
  .portable__eyebrow {
    margin-bottom: 20px;
    font-size: 12px;
  }
  .portable__copy p {
    margin-top: 22px;
    font-size: 16px;
  }
  .portable__features {
    gap: 18px;
    margin-top: 32px;
  }
  .portable__features p {
    grid-template-columns: 26px minmax(0, 1fr);
    column-gap: 12px;
    font-size: 15px;
  }
  .portable__feature-icon {
    width: 24px;
    height: 24px;
  }
  .portable__visual {
    min-height: 0;
    border-radius: 22px;
  }
  .portable__sounds {
    margin-top: 10px;
    padding-left: 0;
    gap: 14px;
  }
  .chord-demo__sounds {
    margin-top: 16px;
    padding-inline: 12px;
    gap: 10px;
  }
  .chord-demo__sounds .portable__sound-options {
    gap: 8px;
  }
  .chord-demo__sounds .portable__sound-options button {
    padding-inline: 11px;
  }
  .portable__sound-options {
    justify-content: flex-start;
    gap: 14px;
  }
  .portable__sound-options button {
    gap: 5px;
    font-size: 14px;
  }
  .portable__sound-options svg {
    width: 21px;
    height: 21px;
  }
}
@media (max-width: 360px) {
  .portable__sounds {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .chord-demo__sounds {
    align-items: center;
    gap: 10px;
  }
}

/* =========================================================================
   Closing waitlist call to action
   ========================================================================= */
.closing-cta {
  padding: 120px 16px;
  background: var(--color-solder-orange);
  color: var(--color-carbon-black);
}
.closing-cta__inner {
  max-width: 1216px;
  margin-inline: auto;
}
.closing-cta__eyebrow {
  display: block;
  margin-bottom: 28px;
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.closing-cta h2 {
  max-width: 1040px;
  font-size: clamp(48px, 7.2vw, 104px);
  line-height: .9;
  letter-spacing: -.055em;
  font-weight: var(--font-weight-medium);
}
.closing-cta .btn {
  min-width: 190px;
  height: 54px;
  margin-top: 48px;
  border: 1px solid var(--color-carbon-black);
  background: var(--color-carbon-black);
  color: var(--color-signal-white);
}
.closing-cta .btn:hover {
  background: transparent;
  color: var(--color-carbon-black);
}
@media (max-width: 700px) {
  .closing-cta {
    padding: 80px 20px;
  }
  .closing-cta__eyebrow {
    margin-bottom: 22px;
    font-size: 12px;
  }
  .closing-cta h2 {
    font-size: 48px;
  }
  .closing-cta .btn {
    width: 100%;
    margin-top: 40px;
  }
}

/* =========================================================================
   How it works — compact, image-led product explanation
   ========================================================================= */
.how-it-works {
  padding: 80px 16px 20px;
  background: #efeee9;
  color: var(--color-carbon-black);
}
.how-it-works__inner {
  max-width: 1392px;
  margin-inline: auto;
}
.how-it-works__copy {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  align-items: end;
  gap: 20px 72px;
  margin-bottom: 44px;
}
.how-it-works__copy .mono-label {
  grid-column: 1 / -1;
  color: #777;
}
.how-it-works__copy h2 {
  font-size: clamp(48px, 6.5vw, 92px);
  line-height: .9;
  letter-spacing: -.055em;
  font-weight: var(--font-weight-medium);
}
.how-it-works__copy p {
  max-width: 560px;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.35;
  letter-spacing: -.015em;
}
.how-it-works__visual {
  position: relative;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  border-radius: 28px;
  background: #050506;
}
.how-it-works__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.how-it-works__visual figcaption { position: absolute; inset: 0; }
.how-it-works__pin {
  position: absolute;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(8,8,10,.72);
  backdrop-filter: blur(10px);
  color: var(--color-signal-white);
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.how-it-works__pin strong {
  color: var(--color-solder-orange);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
}
.how-it-works__pin--chords { left: 22%; bottom: 19%; }
.how-it-works__pin--strings { right: 13%; top: 16%; }
.how-it-works__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, .55fr)) minmax(280px, 1.35fr);
  gap: 0;
  margin-top: 20px;
  border: 1px solid #d3d1ca;
  border-radius: 20px;
  background: rgba(255,255,255,.55);
}
.how-it-works__facts > div,
.how-it-works__facts > p {
  min-height: 124px;
  padding: 22px 24px;
}
.how-it-works__facts > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid #d3d1ca;
}
.how-it-works__facts strong {
  font-size: clamp(30px, 3.5vw, 50px);
  line-height: 1;
  font-weight: var(--font-weight-medium);
  letter-spacing: -.04em;
}
.how-it-works__facts span {
  max-width: 130px;
  color: #686868;
  font-family: var(--font-suisse-intl-mono);
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.how-it-works__facts > p {
  display: flex;
  align-items: center;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.35;
}
@media (max-width: 760px) {
  .how-it-works { padding: 56px 12px 12px; }
  .how-it-works__copy {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 30px;
  }
  .how-it-works__copy .mono-label { grid-column: auto; margin-bottom: 4px; }
  .how-it-works__copy h2 { font-size: clamp(44px, 13vw, 58px); }
  .how-it-works__copy p { font-size: var(--text-body); }
  .how-it-works__visual { border-radius: 18px; }
  .how-it-works__pin {
    padding: 6px 9px;
    gap: 5px;
    font-size: 9px;
  }
  .how-it-works__pin strong { font-size: var(--text-body-sm); }
  .how-it-works__pin--chords { left: 12%; bottom: 9%; }
  .how-it-works__pin--strings { right: 5%; top: 8%; }
  .how-it-works__facts {
    grid-template-columns: repeat(3, 1fr);
    border-radius: 16px;
  }
  .how-it-works__facts > div {
    min-height: 106px;
    padding: 16px 12px;
  }
  .how-it-works__facts > div:nth-child(3) { border-right: 0; }
  .how-it-works__facts > p {
    grid-column: 1 / -1;
    min-height: auto;
    padding: 20px 16px;
    border-top: 1px solid #d3d1ca;
    font-size: var(--text-body);
  }
  .how-it-works__facts span { font-size: 9px; }
}

/* =========================================================================
   Play system — 18 customizable chords × 6 playable strings
   ========================================================================= */
.play-system {
  background: var(--color-solder-orange);
  color: var(--color-carbon-black);
  padding: 72px 16px 16px;
}
.play-system__inner {
  max-width: 1392px;
  margin-inline: auto;
}
.play-system__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  align-items: end;
  gap: 32px 72px;
  margin-bottom: 48px;
}
.play-system__eyebrow {
  grid-column: 1 / -1;
  color: rgba(0,0,0,.62);
  margin-bottom: -8px;
}
.play-system__intro h2 {
  font-size: clamp(52px, 8vw, 116px);
  line-height: .84;
  letter-spacing: -.055em;
  font-weight: var(--font-weight-medium);
}
.play-system__intro p {
  max-width: 500px;
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.22;
  letter-spacing: -.02em;
  padding-bottom: 4px;
}
.play-system__feature {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  min-height: 620px;
  border-radius: 28px;
  overflow: hidden;
  background: var(--color-deep-charcoal);
}
.play-system__device {
  position: relative;
  min-height: 540px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 45% 42%, rgba(255,108,47,.18), transparent 42%),
    #0b0b0b;
}
.play-system__device::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 36%);
  pointer-events: none;
}
.play-system__device img {
  position: relative;
  z-index: 1;
  width: min(88%, 760px);
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.42));
  transform: rotate(-5deg) scale(1.08);
}
.play-system__callout {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(25,25,25,.78);
  backdrop-filter: blur(10px);
  color: var(--color-signal-white);
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  letter-spacing: .04em;
}
.play-system__callout::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--color-solder-orange);
}
.play-system__callout--joystick { left: 6%; bottom: 16%; }
.play-system__callout--strings { right: 5%; top: 17%; }
.chord-map {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 56px);
  background: var(--color-signal-white);
}
.chord-map__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 28px;
}
.chord-map__label,
.play-system__step {
  display: block;
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  line-height: 1.25;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.chord-map__label { color: #767676; margin-bottom: 8px; }
.chord-map h3,
.string-card h3,
.song-card h3 {
  font-size: clamp(28px, 3vw, 42px);
  line-height: .98;
  letter-spacing: -.035em;
  font-weight: var(--font-weight-medium);
}
.chord-map__count {
  flex: none;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--color-carbon-black);
  color: var(--color-signal-white);
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
}
.chord-map__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 28px;
}
.chord-map__grid span {
  display: grid;
  place-items: center;
  min-height: 48px;
  border: 1px solid #d7d7d7;
  border-radius: 8px;
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-body-sm);
  transition: background-color .2s ease, color .2s ease;
}
.chord-map__grid span:nth-child(1),
.chord-map__grid span:nth-child(4),
.chord-map__grid span:nth-child(6) {
  background: var(--color-solder-orange);
  border-color: var(--color-solder-orange);
}
.chord-map > p {
  color: #5f5f5f;
  font-size: var(--text-body);
  line-height: 1.4;
}
.play-system__cards {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  gap: 16px;
  padding-top: 16px;
}
.string-card,
.song-card {
  min-height: 520px;
  border-radius: 28px;
  padding: clamp(28px, 4vw, 56px);
}
.string-card {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(320px, 1.25fr);
  align-items: center;
  gap: 40px;
  background: var(--color-signal-white);
}
.play-system__step { color: #767676; margin-bottom: 18px; }
.string-card__copy p,
.song-card > p {
  margin-top: 20px;
  color: #5f5f5f;
  font-size: var(--text-body);
  line-height: 1.45;
}
.string-card__demo {
  border-radius: 20px;
  padding: 26px 22px 20px;
  background: var(--color-deep-charcoal);
  color: var(--color-signal-white);
}
.string-card__selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-medium);
}
.string-card__selected span {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--color-solder-orange);
  font-family: var(--font-suisse-intl-mono);
  font-size: 10px;
  font-weight: var(--font-weight-regular);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.string-card__string {
  display: grid;
  grid-template-columns: 18px 1fr 24px;
  align-items: center;
  gap: 10px;
  min-height: 43px;
  color: #888;
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
}
.string-card__string i {
  height: 2px;
  background: linear-gradient(90deg, rgba(255,108,47,.42), var(--color-solder-orange));
  box-shadow: 0 0 8px rgba(255,108,47,.38);
}
.string-card__string:nth-of-type(even) i { height: 3px; }
.string-card__string strong {
  color: var(--color-signal-white);
  font-weight: var(--font-weight-medium);
  text-align: right;
}
.string-card__gesture {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  margin-top: 6px;
  border-top: 1px solid rgba(255,255,255,.14);
  color: #9b9b9b;
  font-family: var(--font-suisse-intl-mono);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.string-card__gesture span { color: var(--color-solder-orange); }
.song-card {
  display: flex;
  flex-direction: column;
  background: var(--color-deep-charcoal);
  color: var(--color-signal-white);
}
.song-card .play-system__step { color: #888; }
.song-card > p { color: #aaa; max-width: 440px; }
.song-card__progression {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: auto;
  padding-top: 44px;
}
.song-card__progression span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-height: 80px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-body);
}
.song-card__progression .is-active {
  background: var(--color-solder-orange);
  border-color: var(--color-solder-orange);
}
.song-card__timeline {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
  align-items: end;
  height: 48px;
  margin-top: 28px;
}
.song-card__timeline i {
  height: 35%;
  border-radius: 999px;
  background: #454545;
}
.song-card__timeline i:nth-child(2),
.song-card__timeline i:nth-child(5),
.song-card__timeline i:nth-child(7) { height: 75%; }
.song-card__timeline i:nth-child(1),
.song-card__timeline i:nth-child(4) { height: 52%; background: var(--color-solder-orange); }
.song-card__footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,.14);
  color: #777;
  font-family: var(--font-suisse-intl-mono);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
@media (max-width: 960px) {
  .play-system__feature,
  .play-system__cards { grid-template-columns: 1fr; }
  .play-system__feature { min-height: 0; }
  .play-system__device { min-height: 520px; }
  .play-system__cards { gap: 16px; }
  .song-card { min-height: 480px; }
}
@media (max-width: 640px) {
  .play-system { padding: 56px 12px 12px; }
  .play-system__intro {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 32px;
  }
  .play-system__eyebrow { grid-column: auto; margin-bottom: 4px; }
  .play-system__intro h2 { font-size: clamp(48px, 16vw, 68px); }
  .play-system__intro p { font-size: var(--text-subheading); }
  .play-system__feature,
  .string-card,
  .song-card { border-radius: 20px; }
  .play-system__device { min-height: 350px; }
  .play-system__device img { width: 112%; transform: rotate(-5deg) scale(1.08); }
  .play-system__callout { font-size: 10px; }
  .play-system__callout--joystick { left: 4%; bottom: 10%; }
  .play-system__callout--strings { right: 4%; top: 10%; }
  .chord-map { padding: 28px 20px 32px; }
  .chord-map__grid { gap: 6px; }
  .chord-map__grid span { min-height: 42px; }
  .play-system__cards { padding-top: 12px; gap: 12px; }
  .string-card {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 20px 20px;
  }
  .string-card,
  .song-card { min-height: 0; }
  .song-card { padding: 32px 20px 24px; }
  .song-card__progression { padding-top: 52px; }
  .song-card__footer { flex-direction: column; gap: 4px; }
}

/* =========================================================================
   Sound — "This is what it sounds like."  (black device on muted canvas)
   ========================================================================= */
.sound { background: var(--surface-featured-wash); }
.sound__stage {
  position: relative;
  max-width: 1392px;
  margin-inline: auto;
  height: 640px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-page-canvas);
}
@media (max-width: 768px) { .sound__stage { height: 380px; } }
.sound__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sound__scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.3); }
.sound__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 1px solid var(--color-signal-white);
  background: transparent;
  color: var(--color-signal-white);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.sound__play:hover { background: var(--color-signal-white); color: var(--color-carbon-black); }
.sound__play svg { width: 24px; height: 24px; margin-left: 3px; }

/* =========================================================================
   Highlights — featured orange wash
   ========================================================================= */
.highlights {
  background: var(--surface-featured-wash);
  color: var(--color-carbon-black);
}
.highlights .section-title { color: var(--color-carbon-black); }
.highlights__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  max-width: 1392px;
  margin-inline: auto;
}
@media (min-width: 900px) { .highlights__row { grid-template-columns: 760px 1fr; gap: 48px; } }
.highlights__media {
  aspect-ratio: 760 / 480;
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  transition: background-color .3s ease;
}
/* product renders: show the whole hand + device on a clean card surface.
   #fafafa matches the shots' own near-white studio background so the letterbox
   is seamless; small padding keeps the device off the card edges. */
.highlights__media.is-contain { background: #fafafa; }
.highlights__media img { width: 100%; height: 100%; object-fit: cover; }
.highlights__media.is-contain img { padding: 12px; }
.highlights__panel { max-width: 584px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.highlights__panel h3 { font-size: 29px; line-height: 1.09; letter-spacing: -0.01em; font-weight: var(--font-weight-medium); }
.highlights__panel p { font-size: var(--text-subheading); line-height: 1.33; color: var(--color-carbon-black); }
.carousel-nav { display: flex; align-items: center; gap: 12px; }
.carousel-nav__index { font-size: var(--text-body-sm); min-width: 34px; }
.carousel-nav__btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--color-carbon-black);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-carbon-black); font-size: 16px;
  transition: background .2s ease, color .2s ease;
}
.carousel-nav__btn:hover { background: var(--color-carbon-black); color: var(--color-solder-orange); }

/* =========================================================================
   Anatomy — dark section with part cards
   ========================================================================= */
.anatomy { background: var(--color-deep-charcoal); color: var(--color-bone); }

/* ---- Scroll-pinned reveal (desktop only) ----
   Tall caption track scrolls past a sticky, pinned device stage. An
   IntersectionObserver watching a viewport-center line swaps the active
   part image + caption. Native scroll — no wheel hijacking. */
.anatomy-pin { display: none; }
.anatomy-grid-wrap { padding-block: 56px; }
.anatomy-grid-wrap > .mono-label { display: block; text-align: center; color: var(--color-ash); margin-bottom: 40px; }

@media (min-width: 900px) {
  .anatomy-pin { display: block; }
  .anatomy-grid-wrap { display: none; }
}

.anatomy-pin__grid { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; }
.anatomy-pin__stage {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.anatomy-pin__label { position: absolute; top: 120px; left: 0; }
.anatomy-pin__imgs { position: relative; width: 100%; height: 62vh; }
.anatomy-pin__imgs img {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; height: 100%; width: auto; object-fit: contain;
  opacity: 0; transform: scale(0.98); transition: opacity .55s ease, transform .55s ease;
}
.anatomy-pin__imgs img.is-active { opacity: 1; transform: scale(1); }
.anatomy-pin__index {
  position: absolute; bottom: 120px;
  font-family: var(--font-suisse-intl-mono); font-size: 14px; letter-spacing: 0.12em; color: var(--color-ash);
}
.anatomy-pin__index [data-part-index] { color: var(--color-solder-orange); }

/* lead-in / lead-out: keep the first caption from surfacing until the section
   has filled the viewport, and let the last one clear before the next section.
   50vh + 5×100vh + 50vh = 600vh of scroll (same cadence as the reference). */
.anatomy-pin__caps::before,
.anatomy-pin__caps::after { content: ''; display: block; height: 50vh; }

.anatomy-cap { height: 100vh; }
.anatomy-cap__inner {
  position: sticky; top: 50%; transform: translateY(-50%);
  max-width: 420px;
  opacity: 0.3; transition: opacity .4s ease;
}
.anatomy-cap.is-active .anatomy-cap__inner { opacity: 1; }
.anatomy-cap__num {
  display: block; margin-bottom: 14px;
  font-family: var(--font-suisse-intl-mono); font-size: 14px; letter-spacing: 0.1em;
  color: var(--color-solder-orange);
}
.anatomy-cap h3 {
  font-size: 34px; line-height: 1.1; letter-spacing: -0.02em;
  font-weight: var(--font-weight-medium); color: var(--color-signal-white); margin-bottom: 16px;
}
.anatomy-cap p { font-size: 18px; line-height: 1.5; color: var(--color-ash); }

@media (prefers-reduced-motion: reduce) {
  .anatomy-pin__imgs img { transition: opacity .01s; transform: none; }
}

.anatomy__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1392px;
  margin-inline: auto;
}
@media (min-width: 1024px) { .anatomy__grid { grid-template-columns: repeat(5, 1fr); } }
.part__frame {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: radial-gradient(120% 95% at 50% 32%, #232323 0%, #181818 55%, #121212 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  margin-bottom: 18px;
}
.part__frame img { width: 108%; height: 108%; object-fit: contain; }
.part h3 { font-size: var(--text-body); font-weight: var(--font-weight-medium); color: var(--color-signal-white); margin-bottom: 8px; }
.part p { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--color-ash); }

/* =========================================================================
   Sounds — three-voice tone showcase (Orchid-style track lists)
   ========================================================================= */
.sounds { background: var(--color-deep-charcoal); color: var(--color-bone); }
.sounds .section-title { color: var(--color-signal-white); margin-bottom: 16px; }
.sounds__eyebrow { display: block; text-align: center; margin-bottom: 20px; }
.sounds__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  max-width: 1392px;
  margin-inline: auto;
}
@media (min-width: 900px) { .sounds__grid { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

.sounds__col-head {
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ash);
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.tracklist { list-style: none; margin: 0; padding: 0; }

.track {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 4px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: padding-left 0.18s ease;
}
.track:hover { padding-left: 8px; }
.track__num {
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  color: var(--color-ash);
  width: 22px;
  flex: none;
}
.track__title {
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-signal-white);
}
.track__by {
  font-family: var(--font-suisse-intl-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ash);
  margin-left: auto;
}
@media (max-width: 480px) { .track__by { display: none; } }
.track__play {
  flex: none;
  width: 34px;
  height: 34px;
  margin-left: 16px;
  border-radius: var(--radius-buttons);
  border: 1px solid rgba(255,255,255,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-bone);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
@media (max-width: 480px) { .track__by + .track__play { margin-left: auto; } }
.track__play svg { width: 16px; height: 16px; }
.track__play .i-play { margin-left: 2px; }
.track__play .i-pause { display: none; }
.track:hover .track__play { background: var(--color-signal-white); color: var(--color-carbon-black); border-color: var(--color-signal-white); }

/* active (playing) state */
.track.is-playing .track__title { color: var(--color-solder-orange); }
.track.is-playing .track__num { color: var(--color-solder-orange); }
.track.is-playing .track__play {
  background: var(--color-solder-orange);
  border-color: var(--color-solder-orange);
  color: var(--color-signal-white);
}
.track.is-playing .track__play .i-play { display: none; }
.track.is-playing .track__play .i-pause { display: block; }

.sounds__note {
  margin: 48px auto 0;
  text-align: center;
  font-size: var(--text-body-sm);
  color: var(--color-ash);
}

/* =========================================================================
   Chords — "feel the chords" A/B reveal + strum groove
   ========================================================================= */
.chords { background: var(--surface-featured-wash); color: var(--color-carbon-black); }
.chords .section-title { color: var(--color-carbon-black); margin-bottom: 16px; }
.chords__eyebrow { display: block; text-align: center; color: rgba(0,0,0,0.55); margin-bottom: 20px; }
.chords__sub {
  max-width: 560px;
  margin: 0 auto 48px;
  text-align: center;
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  color: rgba(0,0,0,0.72);
}
.chords__sub strong { font-weight: var(--font-weight-medium); white-space: nowrap; }

.chords__player {
  max-width: 560px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* dark device-style screen showing the live chord */
.chords__screen {
  width: 100%;
  background: var(--color-deep-charcoal);
  color: var(--color-bone);
  border-radius: var(--radius-largesurfaces);
  padding: 40px 24px 32px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}
.chords__screen-label {
  display: block;
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ash);
  margin-bottom: 12px;
}
.chords__now {
  display: block;
  font-size: 88px;
  line-height: 1;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.03em;
  color: var(--color-signal-white);
  font-variant-numeric: tabular-nums;
}

/* chord chips */
.chords__chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.chords__chips .chip {
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-body-sm);
  letter-spacing: 0.04em;
  padding: 8px 16px;
  border-radius: var(--radius-buttons);
  border: 1px solid rgba(0,0,0,0.28);
  color: rgba(0,0,0,0.65);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.chords__chips .chip.is-active {
  background: var(--color-carbon-black);
  color: var(--color-signal-white);
  border-color: var(--color-carbon-black);
  transform: translateY(-2px);
}

/* controls: play + segmented A/B toggle */
.chords__controls { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.chords__play {
  width: 60px; height: 60px;
  flex: none;
  border-radius: var(--radius-buttons);
  border: 0;
  background: var(--color-carbon-black);
  color: var(--color-signal-white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.chords__play:hover { transform: scale(1.05); }
.chords__play svg { width: 24px; height: 24px; }
.chords__play .i-play { margin-left: 3px; }
.chords__play .i-pause { display: none; }
.chords__player.is-playing .chords__play .i-play { display: none; }
.chords__player.is-playing .chords__play .i-pause { display: block; }

.chords__toggle {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--radius-buttons);
  background: rgba(0,0,0,0.10);
}
.chords__toggle .seg {
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: rgba(0,0,0,0.7);
  padding: 10px 18px;
  border-radius: var(--radius-buttons);
  transition: background 0.15s ease, color 0.15s ease;
}
.chords__toggle .seg.is-active { background: var(--color-signal-white); color: var(--color-carbon-black); }

.chords__hint {
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  color: rgba(0,0,0,0.55);
  text-align: center;
}
@media (max-width: 480px) { .chords__now { font-size: 64px; } }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 1392px;
  margin-inline: auto;
}
@media (min-width: 900px) { .faq__layout { grid-template-columns: 420px 1fr; gap: 48px; } }
.faq__heading { font-size: var(--text-heading); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-heading); }
.faq__list { border-top: 1px solid rgba(0,0,0,0.12); }
.faq__item { border-bottom: 1px solid rgba(0,0,0,0.12); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  padding: 24px 0;
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-medium);
}
.faq__q .chev { transition: transform .25s ease; font-size: 18px; color: var(--color-ash); }
.faq__item.open .chev { transform: rotate(180deg); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.faq__item.open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: 24px; color: #4a4a4a; line-height: var(--leading-body); max-width: 720px; }

/* =========================================================================
   Footer
   ========================================================================= */
.footer { background: #000; color: var(--color-ash); border-top: 1px solid rgba(255,255,255,0.12); }
.footer__inner { max-width: 1392px; margin-inline: auto; }
.footer__content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.footer__message {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 560px;
}
.footer__headline {
  color: var(--color-signal-white);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.footer__message p {
  color: rgba(255,255,255,0.72);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}
.footer__button { min-width: 180px; }
.footer__copyright {
  margin-top: 28px;
  text-align: center;
  font-size: var(--text-caption);
  color: rgba(255,255,255,0.56);
}
@media (max-width: 768px) {
  .footer__content { align-items: flex-start; }
  .footer__button { width: 100%; }
}

/* ---------- Waitlist modal ---------- */
.wl-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.wl-modal[hidden] { display: none; }
.wl-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); }
.wl-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--color-signal-white);
  border-radius: var(--radius-largesurfaces);
  padding: 40px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  animation: wl-pop .18s ease;
}
@keyframes wl-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.wl-modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; color: var(--color-ash);
  background: transparent; transition: background-color .2s ease, color .2s ease;
}
.wl-modal__close:hover { background: var(--color-linen-gray); color: var(--color-carbon-black); }
.wl-modal__title { color: var(--color-carbon-black); font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); font-weight: var(--font-weight-medium); }
.wl-modal__sub { color: #555; font-size: var(--text-body); line-height: var(--leading-body); margin-top: 8px; }
.wl-form { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.wl-form__input {
  height: 48px; padding-inline: 16px;
  border: 1px solid rgba(0,0,0,0.16); border-radius: var(--radius-inputs);
  font-family: var(--font-suisse-intl); font-size: var(--text-body); color: var(--color-carbon-black);
  transition: border-color .2s ease;
}
.wl-form__input:focus { outline: none; border-color: var(--color-solder-orange); }
.wl-form__submit { height: 48px; }
.wl-form__error { color: #c0392b; font-size: var(--text-body-sm); }
.wl-form__error[hidden] { display: none; }
.wl-form__privacy { margin-top: 16px; font-size: var(--text-caption); color: var(--color-ash); line-height: var(--leading-body-sm); }
.wl-form__privacy a { color: #555; text-decoration: underline; }
@media (max-width: 480px) { .wl-modal__dialog { padding: 28px 24px; } }

/* ---------- Waitlist modal — survey flow (Figma 191:84) ---------- */
.wl-modal__dialog { max-width: 460px; max-height: calc(100vh - 48px); overflow-y: auto; }
.wl-modal__body { display: flex; flex-direction: column; gap: 18px; }
.wl-modal__body[hidden] { display: none; }

/* two-button action rows (CANCEL/JOIN, PREVIOUS/NEXT) */
.wl-actions { display: flex; gap: 12px; }
.wl-actions .btn { flex: 1; height: 46px; }
.btn--primary:disabled { opacity: 0.4; cursor: default; }
.btn--primary:disabled:hover { background: var(--color-solder-orange); }
.wl-btn--outline { background: transparent; color: var(--color-carbon-black); border: 1px solid var(--color-carbon-black); }
.wl-btn--outline:hover { background: var(--color-carbon-black); color: var(--color-signal-white); }
.wl-btn--outline:disabled { color: var(--color-ash); border-color: var(--color-linen-gray); cursor: default; }
.wl-btn--outline:disabled:hover { background: transparent; color: var(--color-ash); }

/* progress header */
.wl-survey__head { display: flex; align-items: center; gap: 12px; }
.wl-survey__bars { display: flex; gap: 4px; }
.wl-bar { height: 4px; width: 14px; border-radius: 2px; background: var(--color-linen-gray); transition: width .2s ease, background-color .2s ease; }
.wl-bar--active { width: 24px; background: var(--color-solder-orange); }
.wl-bar--done { background: var(--color-solder-orange); }
.wl-survey__count { font-family: var(--font-suisse-intl-mono); font-size: var(--text-caption); color: var(--color-ash); }

/* question + options */
.wl-survey__q { display: flex; flex-direction: column; gap: 4px; }
.wl-survey__title { font-size: 22px; line-height: 1.15; letter-spacing: -0.4px; font-weight: var(--font-weight-medium); color: var(--color-carbon-black); }
.wl-survey__hint { font-size: 13px; color: var(--color-ash); }
.wl-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.wl-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 16px; border: 1px solid var(--color-linen-gray); border-radius: 12px; background: var(--color-signal-white); transition: border-color .15s ease; }
.wl-opt:hover { border-color: var(--color-ash); }
.wl-opt.is-selected { border-color: var(--color-solder-orange); border-width: 1.5px; padding: 12.5px 15.5px; }
.wl-opt__label { flex: 1; font-size: 14px; line-height: 1.25; color: var(--color-carbon-black); }
.wl-opt__mark { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1.5px solid var(--color-ash); color: var(--color-signal-white); font-size: 12px; font-weight: var(--font-weight-medium); }
.wl-opt__mark--radio { border-radius: 999px; }
.wl-opt__mark--check { width: 18px; height: 18px; border-radius: 4px; }
.wl-opt.is-selected .wl-opt__mark--check { border-color: var(--color-solder-orange); background: var(--color-solder-orange); }
.wl-opt.is-selected .wl-opt__mark--radio { border: 6px solid var(--color-solder-orange); background: var(--color-signal-white); }
.wl-opt__other { width: 100%; margin-top: 2px; padding: 13px 16px; border: 1.5px solid var(--color-solder-orange); border-radius: 2px; font-family: var(--font-suisse-intl); font-size: 14px; color: var(--color-carbon-black); }
.wl-opt__other:focus { outline: none; }

/* thank-you */
.wl-modal__success { text-align: center; align-items: center; }
.wl-success__check { width: 64px; height: 64px; border-radius: 999px; background: var(--color-solder-orange); color: var(--color-signal-white); display: flex; align-items: center; justify-content: center; font-size: 30px; margin-top: 8px; }
.wl-modal__success .btn { width: 100%; height: 46px; }