/* equi-poise.ai landing — pixel-match of XD option 3 (D-EquiPoise-Home-Page 4).
   Palette sampled from the design:
     slate        #4D516C  (panels, headings)
     indigo       #858BBD  (icons, FAQ answers)
     body text    #3F3F3F
     watermark    #F3FAFB
   Design artboard width 1440. */

:root {
  --slate: #4D516C;
  --indigo: #858BBD;
  --body: #3F3F3F;
  --watermark: #F3FAFB;
  --page-w: 1440px;
  --content-w: 1010px;
}

@font-face {
  font-family: 'Meuga Sans';
  src: url('../assets/fonts/Meuga-Regular.woff2') format('woff2'),
       url('../assets/fonts/Meuga-Regular.woff') format('woff');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  color: var(--body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; text-decoration: none; cursor: pointer;
  font-size: 13px; letter-spacing: 0.12em; font-weight: 500;
}
.pill-outline { border: 1px solid #fff; color: #fff; padding: 9px 34px; background: transparent; }
.pill-outline:hover { background: rgba(255,255,255,0.12); }
.pill-solid { background: #fff; color: var(--slate); border: none; padding: 10px 40px; }
.pill-solid:hover { background: #e9eaf2; }

/* ---------- HERO ---------- */
/* Geometry measured off the XD artboard (1440x681): pills 131x34 at y58,
   85px side margins; lockup 262 wide at y40; headline block 673x120 at y285.
   All overlay sizes in vw so the composition scales exactly like the artwork. */
.hero { position: relative; width: 100%; aspect-ratio: 1440 / 681; background: #14141c; overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,18,30,0.42) 0%, rgba(18,18,30,0.18) 45%, rgba(18,18,30,0.28) 100%);
}
.hero-topbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 4.03vw 5.9vw 0;
}
.hero .pill-outline {
  font-size: 0.9vw; letter-spacing: 0.12em;
  width: 9.1vw; padding: 0.66vw 0; border-width: 1px;
  justify-content: center;
}
.lockup-img { width: 18.2vw; height: auto; margin-top: -1.25vw; }
.hero-headline {
  position: absolute; left: 0; right: 0; top: 40.5%;
  text-align: center; color: #fff;
  font-size: 4.98vw; font-weight: 300; letter-spacing: -0.008em; line-height: 1.0;
}

/* ---------- INTRO ---------- */
.intro { position: relative; padding: 64px 0 6px; }
.watermarks { position: absolute; inset: 0; color: var(--watermark); pointer-events: none; }
.wm { position: absolute; fill: currentColor; }
.wm-intro { position: absolute; left: -10px; top: 149px; width: 220px; height: auto; pointer-events: none; }
.intro-horses { width: 330px; margin: 0 auto 44px; position: relative; }
.section-heading {
  text-align: center; color: var(--slate);
  font-size: 33px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.45;
  position: relative;
}

/* ---------- FEATURES ---------- */
.features { position: relative; max-width: var(--page-w); margin: 0 auto; padding: 84px 5.5% 40px; overflow: hidden; }
.wm-shoe-r { width: 620px; height: 620px; right: -240px; top: 46%; transform: rotate(-18deg); }
.wm-plus-r { width: 190px; height: 190px; right: -40px; top: 74%; }
.feature-row, .feature-row-flip { position: relative; }
.feature-row {
  display: grid; grid-template-columns: 385px 1fr; gap: 120px;
  align-items: center; margin-bottom: 96px;
}
.feature-row-flip { grid-template-columns: 1fr 385px; gap: 120px; }
.feature-copy .feature-icon { width: 52px; margin-bottom: 26px; }
.feature-copy h3 {
  color: var(--slate); font-size: 23px; font-weight: 500;
  letter-spacing: 0.015em; line-height: 1.35; margin-bottom: 22px;
}
.feature-copy p { font-size: 16px; line-height: 1.72; }
.feature-image { width: 100%; height: auto; }

/* ---------- MAIN FILM ---------- */
.film { position: relative; }
.film-poster { width: 100%; height: auto; display: block; }
.film video { width: 100%; height: auto; display: block; }
.film-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 7vw; height: 7vw; min-width: 64px; min-height: 64px; border: none; background: transparent; cursor: pointer;
  transition: transform 0.15s ease;
}
.film-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.film-play svg { width: 100%; height: 100%; }
.play-ring { fill: rgba(255,255,255,0.26); stroke: #fff; stroke-width: 3; }
.play-tri { fill: #fff; }
.film-note {
  position: absolute; left: 50%; top: 63%; transform: translateX(-50%);
  color: #fff; font-size: 15px; letter-spacing: 0.08em;
}

/* ---------- REGISTER ---------- */
.register { position: relative; background: var(--slate); padding: 96px 0 88px; overflow: hidden; }
.register-watermark {
  position: absolute; right: -60px; top: 50%; transform: translateY(-50%);
  width: 560px; height: 560px; fill: rgba(255,255,255,0.05); pointer-events: none;
}
.register-heading {
  text-align: center; color: #fff;
  font-size: 33px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.45;
  margin-bottom: 58px;
}
.register-form { max-width: 1005px; margin: 0 auto; position: relative; padding: 0 20px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 26px; }
.field-full { grid-column: 1 / -1; }
.field label {
  display: block; color: #fff; font-size: 15px; font-weight: 500; margin-bottom: 10px;
}
.field-nolabel { padding-top: 29px; }
.field input, .field textarea {
  width: 100%; background: transparent;
  border: 1px solid rgba(255,255,255,0.5); border-radius: 2px;
  color: #fff; font-family: inherit; font-size: 15px;
  padding: 14px 16px;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,0.55); }
.field input:focus, .field textarea:focus { outline: 2px solid var(--indigo); outline-offset: -1px; }
.hp-wrap { position: absolute; left: -9999px; top: -9999px; }
.form-status { text-align: center; color: #ffd7d7; font-size: 15px; min-height: 22px; margin-top: 22px; }
.submit { display: block; margin: 10px auto 0; font-family: inherit; }
.submit[disabled] { opacity: 0.55; cursor: default; }
.form-privacy {
  text-align: center; color: rgba(255,255,255,0.65); font-size: 12.5px; margin-top: 26px;
}
.form-privacy a { color: rgba(255,255,255,0.85); }
.register-done { text-align: center; color: #fff; padding: 30px 20px 10px; }
.register-done h3 { font-size: 26px; font-weight: 500; letter-spacing: 0.04em; margin-bottom: 14px; }
.register-done p { font-size: 16px; color: rgba(255,255,255,0.85); }

/* ---------- FAQ ---------- */
.faq { max-width: var(--content-w); margin: 0 auto; padding: 92px 20px 60px; }
.faq .section-heading { margin-bottom: 64px; }
.faq-list details { border-bottom: 1px solid #c9c9c9; }
.faq-list details:first-child { border-top: 1px solid #c9c9c9; }
.faq-list summary {
  list-style: none; cursor: pointer; position: relative;
  font-size: 17px; color: #000; font-weight: 500;
  padding: 20px 44px 20px 0;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 27px; font-weight: 300; color: #000;
}
.faq-list details[open] summary::after { content: '\2212'; }
.faq-list details p {
  color: var(--indigo); font-size: 16px; line-height: 1.68;
  padding: 0 60px 22px 0;
}
.faq-list details p:empty { display: none; }

/* ---------- FOOTER ---------- */
.footer img { width: 100%; height: auto; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .feature-row, .feature-row-flip { grid-template-columns: 1fr; gap: 44px; margin-bottom: 64px; }
  .feature-row-flip .feature-image { order: 2; }
  .section-heading, .register-heading { font-size: 24px; }
  .field-grid { grid-template-columns: 1fr; }
  .field-nolabel { padding-top: 0; }
  .wm-intro { display: none; }
  .film-play { width: 64px; height: 64px; }
  .intro-horses { width: 230px; }
}