/* Landing sign-up CTA on the root page (isolated; root styles.css untouched). */
.landing-cta { display: flex; width: fit-content; align-items: center; gap: 12px; margin: 16px auto 4px; padding: 11px 11px 11px 24px;
  border-radius: 999px; border: 1px solid rgba(201,160,99,.65); background: linear-gradient(100deg, rgba(201,160,99,.30), rgba(201,160,99,.10));
  color: #ecc98f; font: 600 17px/1.1 Inter, system-ui, sans-serif; letter-spacing: .005em; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(201,160,99,.04), 0 10px 30px -12px rgba(201,160,99,.3);
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease, filter .3s ease, border-color .3s ease; }
.landing-cta:hover, .landing-cta:focus-visible { background: linear-gradient(100deg, rgba(201,160,99,.42), rgba(201,160,99,.16)); border-color: rgba(201,160,99,.9);
  transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(201,160,99,.16), 0 14px 42px -10px rgba(201,160,99,.8), 0 0 26px rgba(201,160,99,.22); }
.landing-cta:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .landing-cta { transition: none; } .landing-cta:hover { transform: none; } }
.landing-cta:focus-visible { outline: 2px solid #c9a063; outline-offset: 3px; }
.landing-cta .arrow { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 999px; background: #c9a063; color: #15120d; font-size: 16px; font-weight: 700; }
.landing-cta.bottom { margin: 32px auto 8px; padding: 9px 9px 9px 20px; font-size: 15px; }
.landing-cta.bottom .arrow { width: 26px; height: 26px; font-size: 14px; }
.landing-cta[hidden] { display: none; }
@media (min-width: 900px) { .landing-cta { margin: 22px auto 6px; padding: 13px 13px 13px 28px; font-size: 18px; } .landing-cta .arrow { width: 34px; height: 34px; } }
/* SVG arrow (was a text glyph that sat off-centre on mobile) */
.landing-cta .arrow { display: flex; align-items: center; justify-content: center; line-height: 0; }
.landing-cta .arrow svg { width: 18px; height: 18px; display: block; }
.landing-cta.bottom .arrow svg { width: 16px; height: 16px; }
@media (min-width: 900px) { .landing-cta .arrow svg { width: 20px; height: 20px; } }