/* 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 ---------- */
/* Fixed box; poster and video are absolute layers so swapping them never
   changes page height (no scroll jump on play). Height is capped to the
   viewport so the whole film always fits on screen while playing — the
   video letterboxes (contain) inside the full-width band. */
.film { position: relative; height: min(56.25vw, 92vh); background: #14141c; }
.film.playing { height: 100vh; height: 100svh; }
.film-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.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 select {
  width: 100%; background: transparent; -webkit-appearance: none; appearance: none;
  border: 1px solid rgba(255,255,255,0.5); border-radius: 2px;
  color: #fff; font-family: inherit; font-size: 15px;
  padding: 14px 16px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.field select:focus { outline: 2px solid var(--indigo); outline-offset: -1px; }
.field select option { color: var(--body); background: #fff; }
.field-location { position: relative; }
.addr-list[hidden] { display: none; }
.addr-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  background: #3f4359; border: 1px solid rgba(255,255,255,0.35); border-top: none;
  max-height: 262px; display: flex; flex-direction: column;
}
.addr-items { overflow-y: auto; }
.addr-item {
  display: block; width: 100%; text-align: left; background: transparent; border: none;
  color: #fff; font-family: inherit; font-size: 14.5px; padding: 11px 16px; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.addr-item:hover { background: rgba(255,255,255,0.12); }
.addr-attrib {
  color: rgba(255,255,255,0.55); font-size: 11px; padding: 8px 16px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.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; }
}

/* ---------- consent banner / opt-in / confirm toast ---------- */
.epz-consent {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 60; background: var(--slate); color: #fff;
  max-width: 620px; width: calc(100% - 40px);
  padding: 20px 24px; border-radius: 8px; box-shadow: 0 8px 30px rgba(20,20,30,0.35);
}
.epz-consent p { font-size: 14px; line-height: 1.55; margin-bottom: 14px; }
.epz-consent-actions { display: flex; gap: 12px; }
.epz-consent .pill { font-family: inherit; border: none; cursor: pointer; }
.epz-ghost { background: transparent; border: 1px solid rgba(255,255,255,0.55) !important; color: #fff; padding: 10px 24px; }
.optin { display: flex; gap: 10px; align-items: flex-start; margin-top: 24px; cursor: pointer; }
.optin input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--indigo); flex: none; }
.optin span { color: rgba(255,255,255,0.85); font-size: 13.5px; line-height: 1.5; }
.confirm-toast {
  position: fixed; left: 50%; top: 24px; transform: translateX(-50%);
  z-index: 70; background: #2f7d4f; color: #fff; padding: 14px 26px;
  border-radius: 8px; font-size: 15px; box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}

/* ---------- desktop call popover ---------- */
.call-pop {
  position: absolute; top: calc(4.03vw + 3.2vw); left: 5.9vw; z-index: 40;
  background: #fff; color: var(--slate); border-radius: 8px;
  padding: 14px 18px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 30px rgba(20,20,30,0.35); font-size: 15px;
}
.call-pop strong { font-size: 17px; letter-spacing: 0.02em; }
.call-pop .call-copy {
  border: 1px solid var(--slate); background: transparent; color: var(--slate);
  border-radius: 999px; padding: 6px 16px; font-family: inherit; font-size: 12px;
  letter-spacing: 0.08em; cursor: pointer;
}
.call-pop .call-copy:hover { background: var(--slate); color: #fff; }