/* ============================================================
   Lurelin Audio — site styles
   Design language: warm cream + ink + red, Inter Black for display,
   8px red spine on the left edge of every page.
   ============================================================ */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #D6D0C2;
  color: #1A1A1A;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  min-height: 100vh;
}

/* ---------- the red spine on the left edge of every page ---------- */
body::before {
  content: '';
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: 8px;
  background: #D40000;
  z-index: 100;
  pointer-events: none;
}

/* ---------- typography ---------- */
h1, h2, h3, h4 {
  font-family: "Inter", "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 900;
  letter-spacing: -0.025em;
  text-transform: lowercase;
  margin: 0;
  line-height: 1;
}

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; height: auto; }

.red-dot { color: #D40000; }

.eyebrow {
  font-family: "Inter", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 10.5px;
  color: #6A6A5A;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 auto 14px;
  max-width: 980px;
}
.eyebrow.dark { color: #B8B2A4; }
.eyebrow.red { color: #D40000; font-weight: 900; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  background: #1A1A1A;
  color: #F0EADC;
  border: none;
  padding: 14px 24px;
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.btn:hover { background: #D40000; }
.btn:active { transform: scale(0.98); }
.btn.alt {
  background: transparent;
  color: #1A1A1A;
  border: 2px solid #1A1A1A;
  padding: 12px 22px;
}
.btn.alt:hover { background: #1A1A1A; color: #F0EADC; }
.btn.cream {
  background: #F0EADC;
  color: #1A1A1A;
  border: 2px solid #F0EADC;
  padding: 12px 22px;
}
.btn.cream:hover { background: #D40000; color: #F0EADC; border-color: #D40000; }
.btn.cream-alt {
  background: transparent;
  color: #F0EADC;
  border: 2px solid #F0EADC;
  padding: 12px 22px;
}
.btn.cream-alt:hover { background: #F0EADC; color: #1A1A1A; }
.btn:disabled,
.btn.disabled {
  background: #C8C2B6;
  color: #6A6A5A;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- nav ---------- */
.nav {
  background: #D6D0C2;
  border-bottom: 2px solid #1A1A1A;
  padding: 18px 32px 18px 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.brand {
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #1A1A1A;
  letter-spacing: -0.005em;
  text-transform: lowercase;
  line-height: 1;
  text-decoration: none;
}
.nav-items {
  display: flex;
  gap: 28px;
}
.nav-items a {
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1A1A1A;
  transition: color 0.15s ease;
}
.nav-items a:hover { color: #D40000; }

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1A1A1A;
}

/* ---------- coming-soon tag ---------- */
.coming-soon-tag {
  display: inline-block;
  background: #D40000;
  color: #F0EADC;
  padding: 4px 10px;
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ---------- homepage hero ---------- */
.hero {
  padding: 56px 32px 40px 36px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 44px;
  align-items: center;
}
.headline {
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 108px;
  font-weight: 900;
  line-height: 0.85;
  color: #1A1A1A;
  margin: 0 0 16px;
  letter-spacing: -0.045em;
  text-transform: lowercase;
}
/* When headline is wrapped in a link on the homepage */
.headline-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s ease;
}
.headline-link:hover { opacity: 0.7; }
.headline-link .headline { margin-bottom: 0; }
.headline-link + .tagline { margin-top: 16px; }
.product-photo-link {
  display: block;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.product-photo-link:hover { opacity: 0.85; }
.tagline {
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 13px;
  color: #1A1A1A;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 18px;
}
.hero-sub {
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: #2C2C2C;
  margin: 0 0 26px;
  max-width: 440px;
  font-weight: 500;
}
.cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------- product photo (hero right column) ---------- */
.product-photo {
  background: #0A0E1C;
  border: 2px solid #F0EADC;
  overflow: hidden;
}
.product-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.product-photo-caption {
  margin-top: 10px;
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: #1A1A1A;
  text-transform: uppercase;
  font-weight: 700;
  text-align: right;
}

/* ---------- info strip (under hero on homepage) ---------- */
.info-strip {
  background: #1A1A1A;
  color: #F0EADC;
  padding: 16px 32px 16px 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.info-strip .info-label {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: #B8B2A4;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4px;
}
.info-strip .info-value {
  font-size: 13px;
  color: #F0EADC;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- generic section wrappers ---------- */
.section {
  padding: 64px 32px 64px 36px;
}
.section.dark {
  background: #1A1A1A;
  color: #F0EADC;
}
.section.deep-space {
  background: #0A0E1C;
  color: #F0EADC;
}
.section-narrow { max-width: 640px; margin: 0 auto; }
.section-medium { max-width: 760px; margin: 0 auto; }
.section-heading {
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 36px;
  font-weight: 900;
  margin: 0 auto 32px;
  line-height: 0.95;
  text-transform: lowercase;
  letter-spacing: -0.025em;
  max-width: 980px;
}
.section-heading.cream { color: #F0EADC; }
.body-text {
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #2C2C2C;
  font-weight: 500;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.body-text.cream { color: #B8B2A4; }
.body-text a { color: #1A1A1A; border-bottom: 1px solid #1A1A1A; font-weight: 700; }
.body-text a:hover { color: #D40000; border-bottom-color: #D40000; }
.body-text.cream a { color: #F0EADC; border-bottom-color: #F0EADC; }
.body-text.cream a:hover { color: #D40000; border-bottom-color: #D40000; }

/* ---------- audio block (homepage) ---------- */
.audio-block {
  background: #1A1A1A;
  border: 2px solid #1A1A1A;
  padding: 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}
.play-circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #D40000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s ease;
  border: none;
}
.play-circle:hover { background: #B00000; }
.play-circle::after {
  content: '';
  width: 0; height: 0;
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #F0EADC;
  margin-left: 4px;
}
.play-circle.playing::after {
  content: '';
  width: 14px;
  height: 16px;
  border: 0;
  background:
    linear-gradient(to right, #F0EADC 33%, transparent 33%, transparent 66%, #F0EADC 66%);
  margin-left: 0;
}
.play-circle:disabled,
.play-circle.disabled {
  background: #555;
  cursor: not-allowed;
  pointer-events: none;
}
.audio-text { color: #F0EADC; }
.audio-label {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: #B8B2A4;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 700;
}
.audio-title {
  font-size: 22px;
  font-weight: 900;
  color: #F0EADC;
  margin: 0;
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

/* ---------- brand paragraph (homepage) ---------- */
.brand-para {
  max-width: 560px;
  margin: 56px auto 0;
  text-align: center;
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: #1A1A1A;
  font-weight: 500;
}

/* ---------- audio grid (4-up on /lush) ---------- */
.audio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
}
.audio-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1.5px solid #F0EADC;
  position: relative;
  background: transparent;
}
.play-small {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #D40000;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: none;
  transition: background 0.15s ease;
  position: relative;
}
.play-small:hover { background: #B00000; }
.play-small.disabled { background: #555; cursor: not-allowed; pointer-events: none; }
.play-small::after {
  content: '';
  width: 0; height: 0;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent #F0EADC;
  margin-left: 3px;
}
/* When playing, show pause bars instead of play triangle */
.play-small.playing::after {
  content: '';
  width: 10px;
  height: 12px;
  border: 0;
  background:
    linear-gradient(to right, #F0EADC 33%, transparent 33%, transparent 66%, #F0EADC 66%);
  margin-left: 0;
}
.audio-row-text { flex: 1; color: #F0EADC; }
.audio-row-title {
  font-size: 14px;
  font-weight: 900;
  color: #F0EADC;
  margin: 0;
  text-transform: lowercase;
  letter-spacing: -0.005em;
}
.audio-row-sub {
  font-size: 10px;
  color: #B8B2A4;
  margin: 2px 0 0;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Audio progress bar — sits flush against the bottom edge of an audio row or audio block.
   Track is invisible (the row's existing border is the visual track). Fill grows from
   left to right in red as audio plays. Click/drag scrubs to that position. */
.audio-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}
.audio-progress-fill {
  height: 100%;
  width: 0%;
  background: #D40000;
  transition: width 0.05s linear;
  pointer-events: none;
}
/* When a row is the active playing one, give it a subtle indication
   on the bottom border so the progress bar reads as part of the row */
.audio-row .audio-progress { bottom: -1.5px; }
.audio-block { position: relative; }
.audio-block .audio-progress {
  bottom: 0;
  left: 0;
  right: 0;
}

/* ---------- motion section (/lush) ---------- */
.motion-frame {
  background: #1A1A1A;
  overflow: hidden;
  position: relative;
  padding: 64px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.motion-video {
  display: block;
  width: 75%;
  max-width: 900px;
  height: auto;
  position: relative;
  z-index: 1;
  border: 2px solid #F0EADC;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.motion-shot {
  aspect-ratio: 16/9;
  background: #0A0E1C;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.motion-shot img {
  width: 110%;
  height: 110%;
  object-fit: cover;
  position: absolute;
  top: -5%; left: -5%;
  opacity: 0.4;
  animation: motion-drift 30s linear infinite;
}
@keyframes motion-drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-2%, -1%) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}
.play-large {
  position: relative;
  z-index: 2;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: #D40000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  transition: background 0.15s ease, transform 0.15s ease;
}
.play-large:hover { background: #B00000; transform: scale(1.05); }
.play-large.disabled { background: #555; cursor: not-allowed; pointer-events: none; }
.play-large::after {
  content: '';
  width: 0; height: 0;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent #F0EADC;
  margin-left: 6px;
}
.motion-label {
  position: absolute;
  bottom: 16px; left: 18px;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: #6B7A9E;
  text-transform: uppercase;
  font-weight: 700;
  z-index: 2;
}

/* ---------- features grid (/lush) ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 40px;
  max-width: 980px;
  margin: 0 auto;
}
.feature {
  border-top: 2px solid #1A1A1A;
  padding-top: 18px;
}
.feature-number {
  font-size: 11px;
  font-weight: 900;
  color: #D40000;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.feature-heading {
  font-size: 22px;
  line-height: 1.1;
  color: #1A1A1A;
  margin: 0 0 12px;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: lowercase;
}
.feature-body {
  font-size: 14px;
  line-height: 1.6;
  color: #2C2C2C;
  margin: 0;
  font-weight: 500;
}

/* ---------- specs grid (/lush) ---------- */
.specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 980px;
  margin: 20px auto 0;
}
.spec-item {
  background: #1A1A1A;
  color: #F0EADC;
  padding: 16px 18px;
}
.spec-label {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: #B8B2A4;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
}
.spec-value {
  font-size: 13px;
  color: #F0EADC;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- pricing close (/lush) ---------- */
.price-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  justify-content: flex-start;
  margin: 12px 0 18px;
  max-width: 980px;
}
.price-currency {
  font-size: 32px;
  font-weight: 900;
  color: #D40000;
  font-family: "Inter", "Helvetica Neue", sans-serif;
}
.price-number {
  font-size: 96px;
  font-weight: 900;
  color: #F0EADC;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-family: "Inter", "Helvetica Neue", sans-serif;
}

/* ---------- page header (used on /downloads, /faq, /about) ---------- */
.page-header {
  padding: 72px 32px 56px 36px;
  border-bottom: 2px solid #1A1A1A;
}
.page-title {
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 88px;
  font-weight: 900;
  line-height: 0.9;
  color: #1A1A1A;
  margin: 0;
  letter-spacing: -0.045em;
  text-transform: lowercase;
}

/* ---------- plugin block (/downloads) ---------- */
.plugin-block {
  border: 2px solid #1A1A1A;
  background: #D6D0C2;
  padding: 28px;
  margin-bottom: 24px;
}
.plugin-block-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 12px;
}
.plugin-name {
  font-size: 40px;
  font-weight: 900;
  color: #1A1A1A;
  margin: 0;
  letter-spacing: -0.04em;
  text-transform: lowercase;
  line-height: 1;
}
.plugin-version {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: #6A6A5A;
  text-transform: uppercase;
  font-weight: 700;
}
.plugin-tagline {
  font-size: 12.5px;
  letter-spacing: 0.18em;
  color: #1A1A1A;
  text-transform: uppercase;
  font-weight: 700;
  margin: 4px 0 22px;
}
.download-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.download-btn {
  background: #1A1A1A;
  color: #F0EADC;
  border: none;
  padding: 18px 22px;
  cursor: pointer;
  text-align: left;
  font-family: "Inter", "Helvetica Neue", sans-serif;
  text-decoration: none;
  display: block;
  transition: background 0.15s ease;
}
.download-btn:hover { background: #D40000; }
.download-btn.disabled {
  background: #C8C2B6;
  color: #6A6A5A;
  cursor: not-allowed;
  pointer-events: none;
}
.download-btn-platform {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: #B8B2A4;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
}
.download-btn.disabled .download-btn-platform { color: #888; }
.download-btn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.download-btn-name {
  font-size: 14px;
  font-weight: 900;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- info blocks (/downloads) ---------- */
.info-section {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 2px solid #1A1A1A;
}
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 980px;
  margin: 0 auto;
}
.info-block-heading {
  font-size: 22px;
  font-weight: 900;
  color: #1A1A1A;
  margin: 0 0 10px;
  text-transform: lowercase;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.info-block-eyebrow {
  font-size: 10px;
  font-weight: 900;
  color: #D40000;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ---------- FAQ ---------- */
.faq-group { margin-bottom: 48px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group-heading {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: #D40000;
  text-transform: uppercase;
  font-weight: 900;
  margin: 0 0 18px;
  font-family: "Inter", "Helvetica Neue", sans-serif;
}
details { border-bottom: 1px solid #1A1A1A; }
.faq-group details:first-of-type { border-top: 1px solid #1A1A1A; }
details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 2px;
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-weight: 900;
  font-size: 17px;
  color: #1A1A1A;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  transition: color 0.15s ease;
}
details summary::-webkit-details-marker,
details summary::marker { display: none; }
details summary:hover { color: #D40000; }
.faq-icon {
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-left: 16px;
  position: relative;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: #1A1A1A;
  top: 50%; left: 50%;
}
.faq-icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.faq-icon::after  { width: 2px; height: 14px; transform: translate(-50%, -50%); transition: transform 0.2s ease, opacity 0.2s ease; }
details[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
details summary:hover .faq-icon::before,
details summary:hover .faq-icon::after { background: #D40000; }
.faq-answer {
  padding: 0 2px 22px;
  font-size: 14px;
  line-height: 1.65;
  color: #2C2C2C;
  max-width: 620px;
  font-weight: 500;
}
.faq-answer a {
  color: #1A1A1A;
  border-bottom: 1px solid #1A1A1A;
  font-weight: 700;
}
.faq-answer a:hover { color: #D40000; border-bottom-color: #D40000; }
.faq-answer p { margin: 0 0 10px; }
.faq-answer p:last-child { margin: 0; }

/* ---------- notify-me / signup form ---------- */
.notify-section {
  background: #1A1A1A;
  padding: 80px 32px 80px 36px;
  color: #F0EADC;
}
.notify-section .eyebrow { color: #B8B2A4; max-width: 600px; margin-left: 0; }
.notify-heading {
  font-size: 44px;
  font-weight: 900;
  color: #F0EADC;
  margin: 0 0 18px;
  line-height: 0.95;
  text-transform: lowercase;
  letter-spacing: -0.03em;
  max-width: 600px;
}
.notify-blurb {
  font-size: 15px;
  line-height: 1.55;
  color: #B8B2A4;
  margin: 0 0 28px;
  max-width: 600px;
  font-weight: 500;
}
.signup-form {
  display: flex;
  gap: 10px;
  max-width: 600px;
  margin: 0;
  flex-wrap: wrap;
}
.signup-form input[type="email"] {
  flex: 1;
  min-width: 220px;
  padding: 14px 18px;
  background: transparent;
  border: 2px solid #F0EADC;
  color: #F0EADC;
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 500;
  outline: none;
}
.signup-form input[type="email"]::placeholder {
  color: #6A6A5A;
  text-transform: lowercase;
}
.signup-form input[type="email"]:focus { border-color: #D40000; }
.signup-form button {
  background: #D40000;
  color: #F0EADC;
  border: 2px solid #D40000;
  padding: 14px 28px;
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.signup-form button:hover { background: #F0EADC; color: #1A1A1A; border-color: #F0EADC; }
.form-status {
  margin: 14px 0 0;
  max-width: 600px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  min-height: 18px;
}
.form-status.success { color: #F0EADC; }
.form-status.error { color: #FF6B6B; }

/* ---------- footer ---------- */
.footer {
  background: #D6D0C2;
  border-top: 2px solid #1A1A1A;
  padding: 56px 32px 24px 36px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.4fr;
  gap: 32px;
  margin-bottom: 44px;
}
.footer-brand-name {
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 26px;
  font-weight: 900;
  color: #1A1A1A;
  margin: 0 0 12px;
  letter-spacing: -0.005em;
  text-transform: lowercase;
}
.footer-brand-tag {
  font-size: 12.5px;
  color: #2C2C2C;
  margin: 0;
  line-height: 1.5;
  max-width: 220px;
  font-weight: 500;
}
.col-heading {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: #6A6A5A;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 16px;
  font-family: "Inter", "Helvetica Neue", sans-serif;
}
.link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.link-list a {
  font-size: 13px;
  color: #1A1A1A;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  width: fit-content;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.link-list a:hover { border-bottom-color: #D40000; color: #D40000; }
.newsletter-blurb {
  font-size: 12.5px;
  color: #2C2C2C;
  line-height: 1.5;
  margin: 0 0 18px;
  font-weight: 500;
}
.footer-form {
  display: flex;
  gap: 8px;
}
.footer-form input[type="email"] {
  flex: 1;
  padding: 11px 14px;
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 13px;
  background: #F0EADC;
  border: 1.5px solid #1A1A1A;
  color: #1A1A1A;
  outline: none;
  min-width: 0;
  font-weight: 500;
}
.footer-form input[type="email"]::placeholder { color: #6A6A5A; }
.footer-form button {
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 11px;
  font-weight: 900;
  padding: 11px 18px;
  background: #1A1A1A;
  color: #F0EADC;
  border: none;
  cursor: pointer;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.footer-form button:hover { background: #D40000; }
.footer-bottom {
  border-top: 1px solid #1A1A1A;
  padding-top: 22px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  color: #2C2C2C;
  letter-spacing: 0.02em;
  font-weight: 500;
}
.footer-bottom .copyright { text-align: left; }
.footer-bottom .ig-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  color: #1A1A1A;
  transition: color 0.15s ease;
}
.footer-bottom .ig-link:hover { color: #D40000; }
.footer-bottom .ig-link svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.footer-bottom .legal { text-align: right; }
.footer-bottom .legal a {
  color: #1A1A1A;
  margin-left: 18px;
  font-weight: 500;
  transition: color 0.15s ease;
}
.footer-bottom .legal a:hover { color: #D40000; }

/* ---------- about page ---------- */
.about-content {
  max-width: 600px;
  margin: 0 auto;
  padding: 64px 32px 80px 36px;
}
.about-content p {
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #1A1A1A;
  margin: 0 0 24px;
  font-weight: 500;
}
.about-content p:first-of-type {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: #1A1A1A;
  margin-bottom: 32px;
}

/* ---------- coming-soon override on /downloads ---------- */
/* Direct installer download card on /downloads */
.installer-download {
  background: #D6D0C2;
  border: 2px solid #1A1A1A;
  padding: 40px 32px;
  margin-bottom: 28px;
}
.installer-meta {
  text-align: left;
  margin-bottom: 28px;
}
.installer-meta .eyebrow {
  margin-left: 0;
}
.installer-heading {
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 34px;
  font-weight: 900;
  color: #1A1A1A;
  margin: 0 0 14px;
  letter-spacing: -0.025em;
  text-transform: lowercase;
  line-height: 1.0;
}
.installer-body {
  font-size: 15px;
  color: #2C2C2C;
  margin: 0;
  line-height: 1.55;
  font-weight: 500;
  max-width: 540px;
}
.installer-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
/* OR divider between the two download options */
.or-divider {
  display: flex;
  align-items: center;
  margin: 28px 0;
  gap: 16px;
}
.or-divider::before,
.or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #1A1A1A;
  opacity: 0.3;
}
.or-divider span {
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: #6A6A5A;
  text-transform: uppercase;
  font-weight: 900;
}

/* Plugin download card on /downloads (launch mode) */
.plugin-download-card {
  background: #1A1A1A;
  color: #F0EADC;
  border: 2px solid #1A1A1A;
  padding: 40px 32px;
  margin-bottom: 36px;
}
.plugin-download-meta {
  text-align: left;
  margin-bottom: 28px;
}
.plugin-download-meta .eyebrow.red {
  color: #D40000;
  margin-bottom: 14px;
}
.plugin-download-title {
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 34px;
  font-weight: 900;
  color: #F0EADC;
  margin: 0 0 14px;
  letter-spacing: -0.025em;
  text-transform: lowercase;
  line-height: 1.0;
}
.plugin-download-body {
  font-size: 15px;
  color: #B8B2A4;
  margin: 0;
  line-height: 1.55;
  font-weight: 500;
  max-width: 540px;
}
.trial-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 560px;
}
.trial-form input[type="email"] {
  flex: 1;
  min-width: 220px;
  padding: 12px 16px;
  border: 2px solid #F0EADC;
  background: transparent;
  color: #F0EADC;
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 14px;
  letter-spacing: -0.01em;
  outline: none;
  transition: border-color 0.15s;
}
.trial-form input[type="email"]::placeholder {
  color: #6A6A5A;
}
.trial-form input[type="email"]:focus { border-color: #D40000; }
.trial-form button {
  padding: 12px 24px;
  background: #D40000;
  color: #F0EADC;
  border: 0;
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.trial-form button:hover { background: #B30000; }
.trial-form button:active { transform: scale(0.98); }
.trial-form button:disabled {
  background: #6A6A5A;
  cursor: not-allowed;
}
.trial-status {
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  min-height: 20px;
  color: #F0EADC;
}
.trial-status.error { color: #FF6B6B; }
.trial-status.success { color: #6BFFAE; }

/* ============================================================
   Responsive — mobile breakpoint
   ============================================================ */
@media (max-width: 720px) {
  body::before { width: 6px; }

  .nav { padding: 16px 20px 16px 28px; }
  .nav-items { display: none; }
  .nav-items.open {
    display: flex;
    position: absolute;
    top: 60px;
    left: 0; right: 0;
    background: #D6D0C2;
    border-bottom: 2px solid #1A1A1A;
    flex-direction: column;
    gap: 0;
    padding: 0;
    z-index: 50;
  }
  .nav-items.open a {
    padding: 16px 28px;
    border-bottom: 1px solid #C8C2B6;
  }
  .menu-toggle { display: block; }

  .hero {
    grid-template-columns: 1fr;
    padding: 40px 24px 32px 28px;
    gap: 28px;
  }
  .headline { font-size: 72px; }
  .info-strip {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px 24px 20px 28px;
  }

  .section { padding: 48px 24px 48px 28px; }
  .section-heading { font-size: 28px; }
  .motion-frame { padding: 32px 16px; }
  .motion-video { width: 100%; }
  .audio-grid, .feature-grid, .info-grid, .specs-grid {
    grid-template-columns: 1fr;
  }
  .audio-block {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .audio-block .play-circle { margin: 0 auto; }

  .download-row { grid-template-columns: 1fr; }

  .page-header { padding: 48px 24px 36px 28px; }
  .page-title { font-size: 56px; }

  .footer { padding: 40px 24px 20px 28px; }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .footer-bottom {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 14px;
  }
  .footer-bottom .copyright, .footer-bottom .legal { text-align: center; }
  .footer-bottom .legal a:first-child { margin-left: 0; }

  .about-content { padding: 40px 24px 60px 28px; }
  .about-content p:first-of-type { font-size: 20px; }

  .notify-section { padding: 48px 24px 48px 28px; }
  .notify-heading { font-size: 32px; }
  .signup-form { flex-direction: column; }
  .signup-form button { width: 100%; }

  .price-number { font-size: 64px; }
  .plugin-name { font-size: 32px; }
}
/* ============================================================
   Legal page styles — appended to styles.css
   For terms.html, privacy.html, license.html
   ============================================================ */

.legal-content {
  padding: 56px 32px 80px 36px;
  max-width: 720px;
  margin: 0 auto;
}
.legal-content .last-updated {
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: #6A6A5A;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 40px;
}
.legal-content h2 {
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #1A1A1A;
  margin: 48px 0 16px;
  letter-spacing: -0.015em;
  text-transform: lowercase;
  line-height: 1.2;
}
.legal-content h2:first-of-type {
  margin-top: 0;
}
.legal-content h2 .section-num {
  color: #D40000;
  font-weight: 900;
  margin-right: 8px;
}
.legal-content p {
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #2C2C2C;
  margin: 0 0 16px;
  font-weight: 500;
}
.legal-content p strong {
  color: #1A1A1A;
  font-weight: 700;
}
.legal-content a {
  color: #1A1A1A;
  border-bottom: 1px solid #1A1A1A;
  text-decoration: none;
  font-weight: 700;
}
.legal-content a:hover {
  color: #D40000;
  border-bottom-color: #D40000;
}
.legal-content ul {
  margin: 0 0 20px;
  padding-left: 22px;
}
.legal-content ul li {
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #2C2C2C;
  margin-bottom: 8px;
  font-weight: 500;
}
.legal-content ul li::marker {
  color: #D40000;
}
.legal-intro {
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: #1A1A1A;
  font-weight: 700;
  margin: 0 0 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #C8C2B6;
}

@media (max-width: 720px) {
  .legal-content {
    padding: 40px 24px 60px 28px;
  }
  .legal-content h2 {
    font-size: 18px;
    margin: 36px 0 12px;
  }
  .legal-intro {
    font-size: 15px;
  }
}